zoukankan      html  css  js  c++  java
  • 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();
            }
        }
    }
    

      

  • 相关阅读:
    Educational Codeforces Round 49 (Rated for Div. 2)
    Codeforces Round #506 (Div. 3)
    multiset
    C++中substr函数的用法
    7.30 背包问题
    7.29 dp动态规划
    7.27 图论 存图 前向星 最短路 dijstra算法 SPFA算法
    7.26 搜索进阶(状压搜索,迭代加深搜索)
    7.23 深搜广搜
    7.24 二分搜索
  • 原文地址:https://www.cnblogs.com/yinwei-space/p/10077452.html
Copyright © 2011-2022 走看看