QML控件类型：SwipeView、PageIndicator

SwipeView

一、描述

SwipeView 提供滑动导航页面。继承自 Container。

SwipeView 填充了一组页面。一次可见一页。可以通过横向滑动在页面之间导航。

SwipeView 一般与 PageIndicator 结合使用。

import QtQuick
import QtQuick.Controls

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

    SwipeView {
        id: view

        currentIndex: 1
        anchors.fill: parent

        Label {
            id: firstPage
            text: "firstPage"
        }
        Label {
            id: secondPage
            text: "secondPage"
        }
        Label {
            id: thirdPage
            text: "thirdPage"
        }
    }

    PageIndicator {
        id: indicator

        count: view.count
        currentIndex: view.currentIndex

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

如上所示，SwipeView 通常填充有一组静态页面，这些页面被内联定义为视图的子项。

通常不建议向 SwipeView 添加过多的页面。但是，当页面的数量变得更大，或者单个页面相对复杂时，可能需要通过卸载用户无法立即访问的页面来释放资源。

下面的例子展示了如何使用 Loader 来保持最多三个页面同时实例化：

import QtQuick
import QtQuick.Controls

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

    SwipeView {
        id: view
        anchors.fill: parent

        Repeater 
        {
            model: 6
            Loader 
            {
                active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
                sourceComponent: Text 
                {
                    text: index
                    Component.onCompleted: console.log("created:", index)
                    Component.onDestruction: console.log("destroyed:", index)
                }
            }
        }
    }

    PageIndicator {
        id: indicator

        count: view.count
        currentIndex: view.currentIndex

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

二、属性成员

1、【只读】horizontal : bool / 【只读】vertical : bool

是否水平 / 垂直。

2、interactive : bool

是否可以与 SwipeView 交互。用户不能滑动非交互式视图。默认为 true。

3、orientation : enumeration

方向。

• Qt.Horizontal：水平（默认）
• Qt.Vertical：垂直

三、附加属性

1、【只读】SwipeView.index : int

SwipeView 中每个子项的索引。附加到 SwipeView 的每个子项。

2、【只读】SwipeView.isCurrentItem : bool

如果此子项是当前项，则此附加属性为 true。附加到 SwipeView 的每个子项。

3、【只读】SwipeView.isNextItem : bool

如果此子项是当前项的下一项，则此附加属性为 true。附加到 SwipeView 的每个子项。

4、【只读】SwipeView.isPreviousItem : bool

如果此子项是当前项的前一项，则此附加属性为 true。附加到 SwipeView 的每个子项。

5、【只读】SwipeView.view : SwipeView

管理此子项的 SwipeView。附加到 SwipeView 的每个子项。

四、自定义 SwipeView 示例

import QtQuick
import QtQuick.Controls

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

    SwipeView {
        id: view

        currentIndex: 1
        anchors.fill: parent

        background: Rectangle {
            color: "#128bf1"
        }

        Label {
            id: firstPage
            text: "firstPage"
        }
        Label {
            id: secondPage
            text: "secondPage"
        }
        Label {
            id: thirdPage
            text: "thirdPage"
        }
    }

    PageIndicator {
        id: indicator

        count: view.count
        currentIndex: view.currentIndex

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

---

PageIndicator

一、描述

页面指示器，用于在多个页面的容器中指示当前活动的页面。继承自 Control。

pageIndicator 由呈现页面的委托项目组成。

​

编辑

二、属性成员

1、count : int

页数。

2、currentIndex : int

当前页面的索引。

3、delegate : Component

呈现页面的委托。

以下属性在每个委托的上下文中可用：

• index : int：项目的索引
• press : bool：项目是否被按下

4、interactive : bool

是否是交互式的。交互式页面指示器对按下作出反应并自动适当地更改当前索引。默认为 false。

页面指示器通常非常小，可能比较难点击，并且用户可能不知道是交互的。

三、自定义 pageIndicator 示例

import QtQuick
import QtQuick.Controls

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

    SwipeView {
        id: view

        currentIndex: 1
        anchors.fill: parent

        Label {
            id: firstPage
            text: "firstPage"
        }
        Label {
            id: secondPage
            text: "secondPage"
        }
        Label {
            id: thirdPage
            text: "thirdPage"
        }
    }

    PageIndicator {
        id: indicator

        delegate: Rectangle
        {
            implicitWidth: 8
            implicitHeight: 8

            radius: width / 2
            color: "#21be2b"

            opacity: index === view.currentIndex ? 0.95 : pressed ? 0.7 : 0.45

            required property int index

            Behavior on opacity
            {
                OpacityAnimator
                {
                    duration: 100
                }
            }
        }

        count: view.count
        currentIndex: view.currentIndex

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