QML指示控件：PageIndicator

引言

1. PageIndicator特性

2. 基础实现：与SwipeView联动

2.1 基本示例

2. 交互增强版

3. 属性介绍

4. 实践方案

4.1 动态页面管理（分页加载）

4.2 形状定制：菱形指示点

4.3 动画增强：弹性切换效果

4.4 复合指示：数字标签

引言

在现代移动应用和桌面软件中，分页式界面设计已成为主流的交互范式。Qt Quick Controls 2提供的PageIndicator控件，通过与SwipeView或TabBar的无缝集成，为开发者提供了开箱即用的分页指示解决方案。本文将深度解析该控件的使用技巧以及定制化实践方案。

1. PageIndicator特性

动态页面感知：自动同步SwipeView/TabBar的页面数量(count)和当前位置(currentIndex)
交互支持：支持点击指示点直接跳转目标页面
自适应布局：根据容器尺寸自动调整指示点间距
样式可定制：可完全自定义指示点形状、颜色和动画
跨平台适配：遵循不同操作系统的设计规范

2. 基础实现：与SwipeView联动

2.1 基本示例

import QtQuick
import QtQuick.ControlsWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")SwipeView {id: swipeViewanchors.fill: parentcurrentIndex: pageIndicator.currentIndexRepeater {model: 5Page {Label {text: "Page " + (index + 1)anchors.centerIn: parent}}}}PageIndicator {id: pageIndicatoranchors {bottom: parent.bottomhorizontalCenter: parent.horizontalCenterbottomMargin: 20}count: swipeView.countcurrentIndex: swipeView.currentIndex}
}

代码解析：

通过Repeater生成5个测试页面
count属性绑定SwipeView的页面总数
双向绑定currentIndex实现交互同步
底部居中定位指示器

运行效果：

2. 交互增强版

import QtQuick
import QtQuick.ControlsWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")SwipeView {id: swipeViewanchors.fill: parentcurrentIndex: pageIndicator.currentIndexRepeater {model: 5Page {Label {text: "Page " + (index + 1)anchors.centerIn: parent}}}}PageIndicator {id: pageIndicatorinteractive: true  // 启用点击跳转anchors {bottom: parent.bottomhorizontalCenter: parent.horizontalCenterbottomMargin: 20}count: swipeView.countcurrentIndex: swipeView.currentIndexdelegate: Rectangle {implicitWidth: 16implicitHeight: 16radius: width/2color: index === pageIndicator.currentIndex ? "#21be2b" : "#e0e0e0"Behavior on color {ColorAnimation { duration: 200 }}}}
}

这是一个简单滑动页面的应用，包含5个页面和一个可交互的页面指示器。

要点：

滑动视图：使用SwipeView实现页面滑动，包含5个页面，每个页面显示“Page x”。
页面指示器：使用PageIndicator显示当前页面位置，支持点击跳转。
交互设计：页面指示器的当前页圆点颜色为绿色，其他为灰色，颜色变化带有200ms的动画效果。
布局：页面指示器位于窗口底部居中，距离底部20像素。

运行效果：

3. 属性介绍

属性	类型	默认值	说明
count	int	0	总页数，需手动绑定数据源
currentIndex	int	0	当前激活页索引
spacing	real	4	指示点间距
interactive	bool	false	是否响应点击事件
orientation	enum	Qt.Horizontal	排列方向(Qt.Horizontal/Vertical)

4. 实践方案

4.1 动态页面管理（分页加载）

Column {anchors.fill: parentSwipeView {id: swipeViewwidth: parent.widthheight: parent.height - 100currentIndex: pageIndicator.currentIndex// 动态加载复杂页面Repeater {model: ListModel {ListElement { component: "Page1.qml" }ListElement { component: "Page2.qml" }ListElement { component: "Page3.qml" }}Loader {active: SwipeView.isCurrentItem || SwipeView.isNextItemsource: component}}}PageIndicator {id: pageIndicatorcount: swipeView.countcurrentIndex: swipeView.currentIndexanchors.horizontalCenter: parent.horizontalCentery: swipeView.height + 20// 动态调整可见性visible: count > 1}
}

这段QML代码实现了一个可滑动的视图（SwipeView），通过动态加载多个页面（Page1.qml、Page2.qml、Page3.qml）并配合页面指示器（PageIndicator）来展示和切换页面。

布局结构：使用Column作为根布局，确保SwipeView和PageIndicator垂直排列。
动态加载：通过Repeater和Loader动态加载页面，减少内存占用，仅加载当前页面和下一个页面。
页面指示器：PageIndicator的可见性根据页面数量动态调整，且其位置与SwipeView高度相关。

其中Page1、Page2、Page3分别为红色、绿色、蓝色矩形。

Page1示例：

import QtQuick
import QtQuick.ControlsRectangle {width: 100height: 100color: "red"
}

运行效果：

4.2 形状定制：菱形指示点

将2.1示例中的PageIndicator控件稍加改造：

PageIndicator {id: pageIndicatorinteractive: true  // 启用点击跳转anchors {bottom: parent.bottomhorizontalCenter: parent.horizontalCenterbottomMargin: 20}count: swipeView.countcurrentIndex: swipeView.currentIndex// 动态调整可见性visible: count > 1delegate: Rectangle {width: 14height: 14rotation: 45  // 旋转45度形成菱形color: {if (index === swipeView.currentIndex)return "#ff9800"elsereturn "#cccccc"}Behavior on color {ColorAnimation { duration: 150 }}}
}

指示器的每个元素是一个菱形的矩形，颜色会根据是否为当前页面动态变化，并且支持点击跳转。

要点：

交互性：interactive: true，允许用户通过点击指示器跳转到对应的页面。
布局和对齐：通过anchors设置，指示器位于父布局的底部，水平居中，并且底部有20像素的边距。
动态可见性：visible属性根据页面数量动态调整，当页面数大于1时才显示。

指示器的视觉效果：

每个指示器元素是一个旋转45度的矩形（形成菱形）。
颜色根据是否为当前页面动态变化，当前页面为橙色（#ff9800），其他页面为灰色（#cccccc）。
颜色变化通过ColorAnimation实现平滑过渡，持续时间为150毫秒。

运行效果：

4.3 动画增强：弹性切换效果

PageIndicator {id: pageIndicatorinteractive: true  // 启用点击跳转anchors {bottom: parent.bottomhorizontalCenter: parent.horizontalCenterbottomMargin: 20}count: swipeView.countcurrentIndex: swipeView.currentIndex// 动态调整可见性visible: count > 1delegate: Item {width: 20height: 20Rectangle {id: dotanchors.centerIn: parentwidth: parent.width * (index === swipeView.currentIndex ? 0.8 : 0.6)height: widthradius: width/2color: "#2196f3"Behavior on width {NumberAnimation {duration: 300easing.type: Easing.OutBack}}}}
}

delegate部分定义了页面指示器中每个指示点的样式和动画效果，指示点为圆形，当前页面的指示点会放大并带有弹性动画效果。

要点：

指示点布局：每个指示点是一个Item，宽度和高度均为20像素。
圆形指示点：通过Rectangle定义指示点，使用radius属性使其呈现圆形。

动态变化：

当前页面的指示点会放大到父元素宽度的80%，其他页面的指示点为60%。
尺寸变化通过NumberAnimation实现，持续时间为300毫秒，带有弹性效果（Easing.OutBack）。

运行效果：

4.4 复合指示：数字标签

PageIndicator {id: pageIndicatorinteractive: true  // 启用点击跳转anchors {bottom: parent.bottomhorizontalCenter: parent.horizontalCenterbottomMargin: 20}count: swipeView.countcurrentIndex: swipeView.currentIndex// 动态调整可见性visible: count > 1delegate: Column {spacing: 5Rectangle {width: 12height: 12radius: 6color: index === swipeView.currentIndex ? "green" : "gray"}Text {text: index + 1color: "#333"font.bold: trueanchors.horizontalCenter: parent.horizontalCenter}}
}

delegate部分定义了页面指示器中每个指示项的样式，每个指示项由一个圆形矩形和一个数字文本组成，圆形的颜色根据是否为当前页面动态变化。

在之前的例子上新增了数字文本：