快捷導(dǎo)航

Qt qml實(shí)現(xiàn)動(dòng)態(tài)輪播圖效果

更新時(shí)間：2024年12月30日 10:39:26 作者：小灰灰搞電子

這篇文章主要為大家詳細(xì)介紹了Qt和qml實(shí)現(xiàn)動(dòng)態(tài)輪播圖效果的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下

一、效果展示

二、源碼分享

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:"伺服電機(jī)故障";solution:"請(qǐng)聯(lián)系管理員"}
        ListElement{number:"111";note:"卡件";solution:"清除線體后重新啟動(dòng)"}
        ListElement{number:"222";note:"等待處理";solution:"請(qǐng)聯(lián)系管理員"}
        ListElement{number:"333";note:"等待處理";solution:"請(qǐng)聯(lián)系管理員"}
        ListElement{number:"444";note:"等待處理";solution:"請(qǐng)聯(lián)系管理員"}
        ListElement{number:"555";note:"等待處理";solution:"請(qǐng)聯(lián)系管理員"}
    }
    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:"請(qǐng)聯(lián)系管理員"}
    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

   }

四、實(shí)現(xiàn)原理

通過(guò)PathView實(shí)現(xiàn)，通過(guò)路徑和縮放來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果。

到此這篇關(guān)于Qt qml實(shí)現(xiàn)動(dòng)態(tài)輪播圖效果的文章就介紹到這了,更多相關(guān)Qt qml動(dòng)態(tài)輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: