一般来说,图像轮播都是采用ListView等model进行设计, 比较方便。 这里展示我自己设计的图像轮播
方案, 仅采用两个QImage实现;
下面展示代码以及简述:(注: 以下代码为本人原创, 如需要应用于商业,请留言通知!)
import QtQuick 2.0 import QtQuick.Window 2.3 import QtQuick.Controls 1.4 import MaterialUI 1.0 import com.Advertisement 1.0 AppWindow{ id: adverpage; flags:Qt.FramelessWindowHint; bDomal: true; x: (Screen.desktopAvailableWidth - width)/2; y: (Screen.desktopAvailableHeight - height)/2; QtObject{ id:__inter; property var advertises: adver.avertises; property real index: -1; property real time: 20; //广告时间; //找到下一个; property var firstImg : img1.x == 0? img2: img1; property var secondImg : img1.x == 0 ?img1: img2; property var firstMove : img1.x == 0? img2Moving: img1Moving; property var secondMove : img1.x == 0? img1Moving: img2Moving; property var nextIndex: index+1 >= advertises.length ? 0: index + 1; //得到下一个序号; } function play() { //初始化; __inter.index++; if( __inter.advertises.length >= 2) { if( Qt.platform.os == "windows") { img1.source = "file:///" + __inter.advertises[__inter.index]; img2.source = "file:///" + __inter.advertises[__inter.nextIndex]; }else{ img1.firstImg.source = __inter.advertises[__inter.index]; img2.source = __inter.advertises[__inter.nextIndex]; } } remainTime.text = __inter.time.toString() + " 秒"; timer.start(); } function stop() { timer.stop(); adverpage.close(); } function scroll() { __inter.time--; //时间更新; remainTime.text = __inter.time.toString() + " 秒"; if( __inter.time > 0 ) { console.log(__inter.advertises[__inter.index]); if( Qt.platform.os == "windows") { __inter.secondImg.source = "file:///" + __inter.advertises[__inter.nextIndex]; //预存图像; }else{ __inter.secondImg.source = __inter.advertises[__inter.nextIndex]; } __inter.firstMove.from = 0; __inter.firstMove.to = -__inter.firstImg.width; __inter.secondMove.from = __inter.secondImg.width; __inter.secondMove.to = 0; __inter.firstMove.start(); __inter.secondMove.start(); }else{ timer.stop(); adverpage.close(); } __inter.index = __inter.nextIndex; //下一个; } Rectangle{ id: scrollArea; img1.x > img2.x? img1. img2.width; height:Math.max(img1.height, img2.height); clip: true; Row{ spacing: Global.margin; z: 2; anchors{ top: parent.top; topMargin: Global.margin; right: parent.right; rightMargin: Global.margin; } Label{ //倒计时以及“关闭广告”功能; id: remainTime; 50; height: 20; color: "red"; font.bold: true; horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter } Label{ 50; height: 20; color: "red"; font.bold: true; horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter text:qsTr("关闭广告"); MouseArea{ anchors.fill: parent; onClicked:{ console.log("no right to close"); stop(); } } } } Image { id:img1 cache: false; x: 0; anchors.verticalCenter: parent.verticalCenter; NumberAnimation{ id: img1Moving; target: img1 properties: "x" duration: 300; } } Image{ id: img2; cache: false; x: img1.width; anchors.verticalCenter: parent.verticalCenter; NumberAnimation{ id: img2Moving; target: img2 properties: "x" duration: 300; } } MouseArea{ //暂停功能; anchors.fill: parent; cursorShape: Qt.PointingHandCursor onClicked: { if( timer.running ) timer.stop(); else timer.restart(); } } } Advertisement{ //从本地获取要展示的广告列表; id: adver; } Timer{ //定时器,用于轮播; id: timer; repeat: true; interval: 1500; onTriggered:{ scroll(); } } }