qml: 另类图像轮播;

一般来说,图像轮播都是采用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();
        }
    }
}

  

原文地址:https://www.cnblogs.com/yinwei-space/p/10077452.html