简介

这是一篇关于QT QML 堆叠轮播图的文章

实现是通过使用PathView组件完成的，PageIndicator实现指示器

具有自动轮播功能

代码

//XJYCarouselView.qml

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQml 2.12

Frame{
    property int current: 0
    property alias bannerList : bannerView.model


    background: Rectangle{
        color: "#00000000"
    }
    PathView{
        id:bannerView
        width: parent.width
        height: parent.height

        clip: true

        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onEntered: {
                bannerTimer.stop()
            }
            onExited: {
                bannerTimer.start()
            }
        }

        delegate: Item{
            id:delegateItem
            width:bannerView.width*0.7
            height: bannerView.height
            z:PathView.z?PathView.z:0
            scale: PathView.scale?PathView.scale:1.0

            XJYRoundImage{
                id:image
                imgSrc:modelData
                width: delegateItem.width
                height: delegateItem.height
            }

            MouseArea{
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    console.log(index)
                }
            }
        }

        pathItemCount: 3
        path:bannerPath
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
    }

    Path{
        id:bannerPath
        startX: 0
        startY:bannerView.height/2-10

        PathAttribute{name:"z";value:0}
        PathAttribute{name:"scale";value:0.6}

        PathLine{
            x:bannerView.width/2
            y:bannerView.height/2-10
        }

        PathAttribute{name:"z";value:2}
        PathAttribute{name:"scale";value:0.85}

        PathLine{
            x:bannerView.width
            y:bannerView.height/2-10
        }

        PathAttribute{name:"z";value:0}
        PathAttribute{name:"scale";value:0.6}
    }

    PageIndicator{
        id:indicator
        anchors{
            top:bannerView.bottom
            horizontalCenter: parent.horizontalCenter
            topMargin: -10
        }
        count: bannerView.count
        currentIndex: bannerView.currentIndex
        spacing: 10
        delegate: Rectangle{
            width: 20
            height: 5
            radius: 5
            color: index===bannerView.currentIndex?"white":"#55ffffff"
            Behavior on color{
                ColorAnimation {
                    duration: 200
                }
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    bannerTimer.stop()
                    bannerView.currentIndex = index
                }
                onExited: {
                    bannerTimer.start()
                }
            }
        }
    }

    Timer{
        id:bannerTimer
        running: true
        repeat: true
        interval: 3000
        onTriggered: {
            if(bannerView.count>0)
                bannerView.currentIndex=(bannerView.currentIndex+1)%bannerView.count
        }
    }
}
qml

使用方式

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import "XJY" as XJY
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.0

ApplicationWindow {
    id:window
    width: 640
    height: 480
    visible: true
    title: qsTr("XJY Components")
    
    ColumnLayout{
        
        XJY.XJYCarousel{
            Layout.preferredWidth: window.width
            Layout.preferredHeight: window.width*0.35
            Layout.fillWidth: true
            Layout.fillHeight: true
            bannerList:["file:///C:/***.jpg",
                "file:///C:/***.jpg",
                "file:///C:/***.jpg",
                "file:///C:/***.jpg",
                "file:///C:/***.jpg",
                "file:///C:/***.jpg"]
        }
        
    }
}
qml

效果

微信原创文章