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实现，通过路径和缩放来实现动态效果。