QML控件类型：PageIndicator

一、描述

页面指示器。用于在多个页面的容器中指示当前活动的页面。由呈现页面的委托项目组成。

Column {
    StackLayout {
        id: stackLayout

        Page {
            // ...
        }
        Page {
            // ...
        }
        Page {
            // ...
        }
    }

    PageIndicator {
        currentIndex: stackLayout.currentIndex
        count: stackLayout.count
    }
}

二、属性成员

1、count : int

总页数。

2、currentIndex : int

当前页的索引。

3、delegate : Component

一个呈现页的委托。

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

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

4、interactive : bool

控件是否是交互式的。默认为 false。

交互式页面指示器对按下作出反应并自动适当地更改当前索引。

页面指示器一般非常小（为了避免分散用户对用户界面实际内容的注意力），可能很难点击，并且可能不容易被用户识别为交互的。因此最好被用作主要的导航控件的补充。

SwipeView {
    id: view
    currentIndex: pageIndicator.currentIndex
    anchors.fill: parent

    Page {
        title: qsTr("Home")
    }
    Page {
        title: qsTr("Discover")
    }
    Page {
        title: qsTr("Activity")
    }
}

PageIndicator {
    id: pageIndicator
    interactive: true
    count: view.count
    currentIndex: view.currentIndex

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

三、 自定义 PageIndicator 示例

import QtQuick
import QtQuick.Controls

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

    PageIndicator {
        id: control
        count: 5
        currentIndex: 2

        delegate: Rectangle {
            implicitWidth: 8
            implicitHeight: 8

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

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

            required property int index

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