【Qt6 QML Book 基础】14：常规模式 2 - 滑动视图（附完整可运行代码）

引言

在现代应用程序的设计中，滑动视图（SwipeView）是一种极为常见且实用的交互模式。它允许用户通过左右滑动屏幕来切换不同的页面，为用户提供了流畅、直观的导航体验。在 Qt Quick 中，SwipeView组件正是实现这一交互模式的核心工具。本文将详细介绍如何使用SwipeView组件构建一个包含多个页面的滑动视图应用，并通过PageIndicator组件为用户提供当前页面的指示。

一、运行效果图

1.1 整体布局

该应用由三个页面组成，分别为 “当前页”、“用户统计” 和 “总体统计”。用户可以通过左右滑动屏幕来切换不同的页面。

1.2 当前页

当前页显示了 “当前页激活” 的提示信息，页面顶部有一个标题，底部有一个分页指示器，用于指示当前页面的位置。

1.3 总体统计页

总体统计页显示了 “总体统计数据” 的信息，并且包含一个 “返回” 按钮，点击该按钮可以直接返回至第一页。

二、滑动视图

2.1 交互流程

我们创建一个由三个页面组成的用户界面，用户可以在这些页面之间切换。这些页面如下图所示。这可能是健康跟踪应用程序的界面，跟踪当前状态、用户的统计数据和整体统计数据。

用户打开应用后，默认显示 “当前页”。用户可以通过左右滑动屏幕来切换到 “用户统计” 页或 “总体统计” 页。在 “总体统计” 页，用户可以点击 “返回” 按钮直接返回至 “当前页”。在滑动过程中，SwipeView会提供过渡动画，使用户能够清晰地感知页面的切换方向。

2.2 界面布局

2.2.1 SwipeView

SwipeView是实现滑动视图的核心组件，它可以包含多个子页面，用户可以通过左右滑动来切换这些页面。以下是main.qml中SwipeView的代码：

 SwipeView {
        id: swipeView  // 滑动视图容器
        anchors.fill: parent  // 填充父容器
        Current {
        }
        UserStats {
        }
        TotalStats {
        }
    }

在上述代码中，SwipeView填充了整个父容器，并且包含了三个子页面：Current、UserStats和TotalStats。这些子页面将按照它们在代码中出现的顺序依次排列。

2.2.2 PageIndicator

PageIndicator用于指示当前页面的位置，它通过绑定SwipeView的currentIndex和count属性来实现这一功能。以下是main.qml中PageIndicator的代码：

 // 分页指示器控件
    PageIndicator {
        anchors.bottom: parent.bottom  // 底部定位
        anchors.horizontalCenter: parent.horizontalCenter  // 水平居中
        currentIndex: swipeView.currentIndex  // 绑定当前页索引
        count: swipeView.count  // 显示总页数
    }    

在上述代码中，PageIndicator位于父容器的底部并水平居中，它的currentIndex属性绑定到SwipeView的currentIndex属性，count属性绑定到SwipeView的count属性。这样，PageIndicator就能够准确地显示当前页面的位置和总页面数。

三、组件实现

每个页面都由一个 Page 组成，其header由 Label 和一些内容组成。对于 Current 和 User Stats 页面，内容由一个简单的Label组成，但对于 Community Stats 页面，包含一个后退按钮。

3.1 Current 页

import QtQuick
import QtQuick.Controls

Page {

    header: Label {
        text: qsTr("当前页")
        font.pixelSize: Qt.application.font.pixelSize * 2
        padding: 10
    }

    Label {
        text: qsTr("当前页激活")
        anchors.centerIn: parent
    }

}

Current页是一个Page组件，它包含一个标题和一个居中显示的标签。标题使用qsTr函数进行国际化处理，并且字体大小是应用程序默认字体大小的两倍。

3.2 UserStats 页

import QtQuick
import QtQuick.Controls

// 用户统计页面组件
Page {
    // 页面标题区域
    header: Label {
        text: qsTr("用户统计")  // 国际化文本
        font.pixelSize: Qt.application.font.pixelSize * 2  // 标题字号
    }

    // 核心内容区域
    Label {
        anchors.centerIn: parent  // 居中显示
        text: qsTr("用户统计数据") 
    }
}

UserStats页同样是一个Page组件，它包含一个标题和一个居中显示的标签，用于显示用户统计数据。

3.3 TotalStats

import QtQuick
import QtQuick.Controls

// 总体统计页面组件
Page {
    // 带返回按钮的统计页面
    header: Label {
        text: qsTr("总体统计")
        padding: 10  // 标题内边距
        font.pixelSize: Qt.application.font.pixelSize * 2
    }

    // 垂直布局容器
    Column {
        anchors.centerIn: parent
        spacing: 10  // 子项间距

        Label {
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("总体统计数据")
        }

        // 返回主页面按钮
        Button {
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("返回")
            onClicked: swipeView.setCurrentIndex(0)  // 切换至第一页
        }
    }
}

TotalStats页也是一个Page组件，它包含一个标题、一个显示总体统计数据的标签和一个 “返回” 按钮。点击 “返回” 按钮时，会调用SwipeView的setCurrentIndex方法将当前页面索引设置为 0，从而返回至第一页。

注意：

以编程方式在 SwipeView 中导航时，重要的是不要在 JavaScript 中通过赋值设置 currentIndex。这是因为这样做会破坏它覆盖的任何 QML 绑定。请改用 setCurrentIndex、incrementCurrentIndex 和 decrementCurrentIndex 方法。这将保留 QML 绑定。

总结

本文详细介绍了如何使用 Qt Quick 中的SwipeView组件构建一个包含多个页面的滑动视图应用，并通过PageIndicator组件为用户提供当前页面的指示。通过这种方式，我们可以为用户提供流畅、直观的导航体验。同时，我们还实现了页面之间的切换和返回功能，使用户能够方便地在不同页面之间进行导航。在实际开发中，我们可以根据具体需求对页面内容进行扩展和定制，以满足不同的业务场景。