Qt Quick Controls2 — 轮播图 Banner 图的实现

Qt Quick Controls2 — 轮播图 Banner 图的实现

贴码如下：

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Rectangle {
    id:root
     property int i: 0;
    //图片地址数组↓
    property var imagelist: [
       { "url":"https://www.tiertime.com","path":"qrc:///res/image/banner_default.png"}
    ];


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

    Rectangle{
        id:rect;
        anchors.fill: parent
        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)%3;
                    indicator.currentIndex=swipeview.currentIndex;
                }
            }
        }

        //如果鼠标在轮播图里就停止，方便浏览
        MouseArea{
            anchors.fill: parent;
            hoverEnabled: true;
            onEntered: {
                imageSwitch.stop();
                console.log("onEntered ");
            }
            onExited: {
                imageSwitch.start();
                  console.log("onExited ");
            }
            onClicked: {
                console.log(onClicked +" "+ swipeview.currentIndex )
                Qt.openUrlExternally(imagelist[swipeview.currentIndex].path)
            }
        }

        PageIndicator{
            id:indicator;
            count:imagelist.length;
            interactive: true;//可点击
            anchors.bottom: rect.bottom;
            anchors.bottomMargin: 4;
            anchors.horizontalCenter: rect.horizontalCenter;

            onCurrentIndexChanged: {
                swipeview.currentIndex=currentIndex;
            }
        }
    }

    //根据图片数组的数量来决定生成组件的数量
    Component.onCompleted: {
        for(i;i<imagelist.length;i++)
        {
            swipeImage.createObject(swipeview,{"source":imagelist[i].path,"x":swipeview.x,"y":swipeview.y,
                                        "width":swipeview.width,"height":swipeview.height});
        }
        swipeview.currentIndex=0;
        imageSwitch.start();
    }
}