Qt qml实现动态轮播图效果
作者：小灰灰搞电子
这篇文章主要为大家详细介绍了Qt和qml实现动态轮播图效果的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
一、效果展示
二、源码分享
DynamicCarousel.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Shapes
Item {
id:self
signal clearError(string numberStr)
PathView{
id:pathView
anchors.fill: parent
focus: true
clip: true
model:listModel
delegate:listDelegate
path: listPath
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
pathItemCount: 3
MouseArea{
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onEntered: {
timerCircle.stop()
}
onExited: {
timerCircle.start()
}
}
}
ListModel{
id:listModel
ListElement{number:"000";note:"伺服电机故障";solution:"请联系管理员"}
ListElement{number:"111";note:"卡件";solution:"清除线体后重新启动"}
ListElement{number:"222";note:"等待处理";solution:"请联系管理员"}
ListElement{number:"333";note:"等待处理";solution:"请联系管理员"}
ListElement{number:"444";note:"等待处理";solution:"请联系管理员"}
ListElement{number:"555";note:"等待处理";solution:"请联系管理员"}
}
Component{
id:listDelegate
Rectangle{
width: pathView.width
height: pathView.height*1.2
color: "#f013227a"
radius: 15
border.width: 2
z:PathView.z?PathView.z:0
scale: PathView.scale?PathView.scale:1.0
required property string number
required property string note
required property string solution
RowLayout{
anchors.fill: parent
anchors.margins: 5
ColumnLayout{
Layout.fillWidth: true
Layout.fillHeight: true
Text {
id: textErrorNumber
Layout.fillWidth: true
Layout.fillHeight: true
text: number
font.pointSize: 16
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
color: "#ffffffff"
}
Text {
Layout.fillWidth: true
Layout.fillHeight: true
id: textErrorNote
text: note
font.pointSize: 12
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
color: "#ffffffff"
}
Text {
Layout.fillWidth: true
Layout.fillHeight: true
id: textErrorSolution
text: solution
font.pointSize: 12
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
color: "#ffffffff"
}
}
Button{
id:btnClearError
Layout.preferredWidth: parent.width/5
Layout.preferredHeight: parent.width/5
hoverEnabled: false
scale: down?0.8:1.0
background: Rectangle{
radius: 10
border.width: 0
color: "#00000000"
Image {
anchors.fill: parent
source:"qrc:/image/resources/images/qml/clearError.svg"
}
}
onClicked: {
clearError(textErrorNumber.text)
listModel.remove(pathView.currentIndex)
}
}
}
}
}
Path{
id:listPath
startX: 0
startY:pathView.height/2
PathAttribute{name:"z";value:0}
PathAttribute{name:"scale";value:0.5}
PathLine{
x:pathView.width/2
y:pathView.height/2
}
PathAttribute{name:"z";value:2}
PathAttribute{name:"scale";value:0.8}
PathLine{
x:pathView.width
y:pathView.height/2
}
PathAttribute{name:"z";value:0}
PathAttribute{name:"scale";value:0.5}
}
Timer{
id:timerCircle
running: true
repeat: true
interval: 3000
onTriggered: {
pathView.incrementCurrentIndex()
}
}
//ListElement{number:"1121";note:"等待处理";solution:"请联系管理员"}
function addError(numberStr,noteStr,solutionStr){
var data = {number: numberStr,note:noteStr,solution:solutionStr};
listModel.append(data)
}
}
三、使用方法
DynamicCarousel{
anchors.fill: parent
anchors.margins: 5
anchors.horizontalCenter: parent.horizontalCenter
}
四、实现原理
通过PathView实现，通过路径和缩放来实现动态效果。
到此这篇关于Qt qml实现动态轮播图效果的文章就介绍到这了,更多相关Qt qml动态轮播图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！