qml之轮播效果

前言：
这是一个阳光明媚的上午，温暖的阳光以45度的夹角斜射在我2k高清显示屏上，我深吸了一口经过微波炉加热后弥漫着饭菜味道的空气，望了一眼左手边美女UI的卡姿兰大眼睛，手指不停的点击着鼠标，时而发出叹气的声音，也许是给产品页配图而烦恼吧，我帮不上什么忙，也不知道该怎么温言软语的安慰她，毕竟我也不能用我老年人的审美去给她提什么建设性的意见，好吧，我终于打开了我许久未写的csdn博客页。

该博客用于记录qml（5.6.0版本）实现图片的轮播滚动效果，实现细节不复杂，共两种实现方法，第一种主要用到了Timer定时器和NumberAnimation 动画效果，第二种用到了SwipeView和PageIndicator控件。以下是具体的实现代码，复制粘贴后可以直接运行，当然了图片路径要替换成自己的，废话不多说，直接上干货！

先上效果图：

完整代码：

方法一：

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQml 2.2

Window {
    id:id_root
    visible: true
    width: 800
    height: 500
    Rectangle{
        id: id_bk
        color: "black"
        anchors.fill: parent

        Rectangle{
            id: id_bk2
            color: "black"
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            width: 600
            clip: true
            ListModel {
                id:id_model
                ListElement {
                    _source:"file:///C:/Users/admin/Pictures/1.png"
                }
                ListElement {
                    _source:"file:///C:/Users/admin/Pictures/2.png"
                }
                ListElement {
                    _source:"file:///C:/Users/admin/Pictures/3.png"
                }
                ListElement {
                    _source:"file:///C:/Users/admin/Pictures/4.png"
                }
            }

            Image{
                id:id_img_last
                width: id_img_cur.width
                anchors.right: id_img_cur.left
                anchors.rightMargin: 0
                anchors.top: id_img_cur.top
                anchors.bottom: id_img_cur.bottom
                fillMode: Image.PreserveAspectFit
            }

            Image{
                id:id_img_cur
                x:(id_bk2.width - id_img_cur.width)/2
                width: 600
                fillMode: Image.PreserveAspectFit
                anchors.verticalCenter: parent.verticalCenter
                source: id_rp.count ? id_rp.model.get(0)._source : undefined
                NumberAnimation {
                    id: anim
                    target: id_img_cur
                    properties: "x"
                    from: id_bk2.width - 30
                    to: (id_bk2.width - id_img_cur.width)/2
                    duration: 2000
                    easing.type: Easing.OutQuint
                    easing.amplitude: 2.0
                    easing.period: 1.5
                    onStopped: {
                        id_img_last.source = id_img_cur.source
                    }
                }
            }

            Row {
                id:id_list
                height: 20
                anchors.top: id_img_cur.bottom
                anchors.topMargin: 5
                anchors.horizontalCenter: id_bk2.horizontalCenter
                spacing: 10

                property var curIndex: id_rp.count ? 0 : -1

                Repeater {
                    id:id_rp
                    model: id_model
                    Rectangle {
                        width: 20
                        height: 20
                        radius: 10
                        color: id_list.curIndex === index ? "gray" : "transparent"
                        border.width: 1
                        border.color: "white"
                        MouseArea{
                            id:id_mouse
                            anchors.fill: parent
                            cursorShape:Qt.PointingHandCursor
                            onClicked: {
                                if(id_list.curIndex !== index)
                                {
                                    if(anim.running)
                                        anim.stop()

                                    id_list.curIndex = index
                                    id_img_cur.source = _source
                                    anim.start()
                                }
                            }
                        }
                    }
                }
            }

            Timer {
                id: id_timer
                interval: 4000
                repeat: true
                onTriggered: {
                    if(!anim.running)
                    {
                        var count = id_rp.count
                        if(count > 1)
                        {
                            id_list.curIndex = id_list.curIndex + 1 >= count ? 0 : id_list.curIndex + 1
                            id_img_cur.source = id_rp.model.get(id_list.curIndex)._source
                            anim.start()
                        }
                    }
                }
            }
            Component.onCompleted: id_timer.start()
        }
    }
}

方法二：

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import Qt.labs.controls 1.0
import QtQml 2.2

Window {
    id:id_root
    visible: true
    width: 800
    height: 500
    Rectangle{
        id: id_bk
        color: "white"
        anchors.fill: parent

        Rectangle {
            id:userwindow
            anchors.fill: parent
            //图片地址数组↓
            property var imagelist: ["file:///C:/Users/slf/Pictures/dd/1.png"
                ,"file:///C:/Users/slf/Pictures/dd/2.png"
                ,"file:///C:/Users/slf/Pictures/dd/3.png"
                ,"file:///C:/Users/slf/Pictures/dd/4.png"];
            property var i: 0;


            //图片组件
            Component{
                id:swipeImage;
                Image{
                    asynchronous: true;
                }
            }

            Rectangle{
                id:rect;
                width: parent.width/2;
                height: parent.height/2;
                anchors.top: parent.top;
                anchors.topMargin: 20;
                anchors.horizontalCenter: parent.horizontalCenter;
                clip: true;	//截断多出来的部分
                SwipeView{
                    id:swipeview;
                    anchors.fill: parent;

                    Timer{//3.5秒后切换图片
                        id:imageSwitch;
                        interval: 3500;
                        repeat: true;
                        onTriggered: {
                            swipeview.currentIndex=(swipeview.currentIndex+1)%4;
                            indicator.currentIndex=swipeview.currentIndex;
                        }
                    }
                }

                PageIndicator{
                    id:indicator;
                    count:userwindow.imagelist.length
                    interactive: true;
                    anchors.bottom: rect.bottom;
                    anchors.bottomMargin: -6;
                    anchors.horizontalCenter: rect.horizontalCenter;
                    onCurrentIndexChanged: {
                        swipeview.currentIndex=currentIndex;
                    }
                    delegate: Rectangle{
                        width: 10;height: 10
                        radius: 5
                        color: indicator.currentIndex === index ? "green" : "gray"
                    }
                }
            }

            Component.onCompleted: {
                for(i;i<userwindow.imagelist.length;i++)
                {
                    swipeImage.createObject(swipeview,{"source":userwindow.imagelist[i],"x":swipeview.x,"y":swipeview.y,
                                                "width":swipeview.width,"height":swipeview.height});
                }
                swipeview.currentIndex=0;
                imageSwitch.start();
            }
        }
    }
}