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();
}
}