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

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.