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

来源：互联网发布：交大网络教育学院网址编辑：程序博客网时间：2024/06/06 17:44

1 建立一个 QtQuick工程

2 在生成的main.qml中，改成如下的：

import QtQuick2.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.

1 0