QML SwipeView

QML SwipeView

• 参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd
• 参考：https://doc.qt.io/qt-5/qml-qtquick-controls2-swipeview.html

示例1

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window
{
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item
    {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)

        SwipeView {
            id: view

            currentIndex: 1
            anchors.fill: parent

            Rectangle
            {
                Text
                {
                    text: qsTr("firstPage")
                }
            }
            Rectangle
            {
                Text
                {
                    text: qsTr("secondPage")
                }
            }
            Rectangle
            {
                Text
                {
                    text: qsTr("thirdPage")
                }
            }
        }

        PageIndicator
        {
            id: indicator

            count: view.count
            currentIndex: view.currentIndex

            anchors.bottom: view.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}

• 输出：

示例2

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window
{
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item
    {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)
        property var pages:["Home", "Help", "About"]

        TabBar
        {
            id: titleBar
            anchors.left: parent.left
            anchors.right: parent.right

            currentIndex: view.currentIndex

            Repeater
            {
                model: rootItem.pages

                TabButton
                {
                    text: modelData
                    onClicked:
                    {
                        view.currentIndex = index
                    }
                }
            }
        }


        SwipeView
        {
            id: view
            anchors.top: titleBar.bottom
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right

            currentIndex: 0
            Repeater
            {
                model: rootItem.pages.length
                Rectangle
                {
                    color: rootItem.colorBuilder()
                }
            }
        }

        PageIndicator {
            id: indicator

            count: view.count
            currentIndex: view.currentIndex

            anchors.bottom: view.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}

• 输出：