关闭

如何实现使用QtQuick循环轮播图,并支持用户滑动切换

标签: QtQuick
586人阅读 评论(0) 收藏 举报
分类:

1 建立一个 QtQuick工程

2 在生成的main.qml中,改成如下的:

import QtQuick 2.6

import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    //MainForm {
        //anchors.fill: parent
        //mouseArea.onClicked: {
        //    Qt.quit();
        //}
    //}


3 然后添加上下面的:(Part3来源:Jason


Flickable {
        id: flickableForImage
        z: 6
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 3
        width: parent.width
        height: (width / 375) * 135
        contentWidth: width * 3
        contentHeight: height
        onMovementStarted: {
            timerForImage.running = false;
            animationForContenX.running = false;
        }
        onMovementEnded: {
            timerForImage.running = true;
            animationForContenX.duration = 500;
            var a = Math.abs( contentX - 0 );
            var b = Math.abs( contentX - width );
            var c = Math.abs( contentX - (width * 2) );
            var d = Math.min( a, b, c );
            if ( a == d)
            {
                animationForContenX.to = 0;
                animationForContenX.running = true;
            }
            else if( b == d )
            {
                animationForContenX.to = width;
                animationForContenX.running = true;
            }
            else if (c == d )
            {
                animationForContenX.to = width * 2;
                animationForContenX.running = true;
            }
        }
        onWidthChanged: {
            if ( animationForContenX.running )
            {
                return;
            }
            contentX = 0;
        }
        onHeightChanged: {
            if ( animationForContenX.running )
            {
                return;
            }
            contentX = 0;
        }
        Timer {
            id: timerForImage
            interval: 6000
            running: !pageForLogin.visible
            repeat: true
            onTriggered: {
                animationForContenX.running = false;
                animationForContenX.duration = 1000;
                if ( flickableForImage.contentX <= 0 )
                {
                    animationForContenX.to = width;
                    animationForContenX.running = true;
                }
                else if ( flickableForImage.contentX <= width )
                {
                    animationForContenX.to = width * 2;
                    animationForContenX.running = true;
                }
                else
                {
                    animationForContenX.to = 0;
                    animationForContenX.running = true;
                }
            }
        }
        NumberAnimation {
            id: animationForContenX
            target: flickableForImage
            property: "contentX"
            easing.type: Easing.OutCubic
        }
        Item {
            width: parent.width
            height: parent.height
            Image {
                width: parent.width / 3
                height: parent.height
                source: "qrc:/Mobile/Menu/TitleImage1.jpg"
            }
            Image {
                x: (parent.width / 3) * 1
                width: parent.width / 3
                height: parent.height
                source: "qrc:/Mobile/Menu/TitleImage2.jpg"
            }
            Image {
                x: (parent.width / 3) * 2
                width: parent.width / 3
                height: parent.height
                source: "qrc:/Mobile/Menu/TitleImage3.jpg"
            }
        }
        RectangularGlow {
            anchors.fill: parent
            z: -1
            width: parent.width
            height: parent.height
            glowRadius: 2
            spread: 0.22
            color: "#30000000"
        }
    }
}

 

4 QML类型说明-Flickable

ImportStatement:   import QtQuick 2.2

Inherits:      Item

InheritedBy:    GridView and ListView.





2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:328713次
    • 积分:7982
    • 等级:
    • 排名:第2677名
    • 原创:465篇
    • 转载:166篇
    • 译文:0篇
    • 评论:51条
    最新评论