【Qt6 QML Book 基础】13：常规模式 1 - 嵌套屏幕（附完整可运行代码）

引言

在移动应用和现代桌面程序中，嵌套屏幕导航是最常见的交互模式之一。通过分层展示信息，用户可以在不同层级的页面间灵活切换，既保持信息架构的清晰，又提升操作效率。Qt Quick 提供的 StackView 组件正是实现这一模式的核心工具，它通过管理页面堆栈（Stack），轻松实现 “后进先出” 的导航逻辑。本文将结合实战案例，详解如何使用 StackView 构建多层级界面，并通过 Drawer（抽屉导航）与 ToolBar（工具栏）实现高效的导航交互。

一、运行效果图

1.1 主页（Home）

• 核心布局：
  • 顶部工具栏显示汉堡菜单图标（☰），点击打开侧边导航；
  • 中心区域显示 “主页界面” 标签，采用Page组件自动适配屏幕尺寸。

1.2 概述页（Profile）

• 交互逻辑：
  • 从抽屉导航点击 “概述” 进入，工具栏图标变为返回箭头（◀）；
  • 包含 “编辑” 按钮，点击后进入编辑页（EditProfile）。

1.3 编辑页（EditProfile）

• 导航特性：
  • 工具栏返回箭头可逐级返回上一层（概述页→主页）；
  • StackView 自动管理页面堆栈深度（depth 属性）。

1.4 关于页（About）

• 组件复用：
  • 通过 Component 定义可复用的关于页组件，抽屉导航直接推送该组件实例。

二、堆栈视图：导航逻辑的核心

2.1 交互流程设计

• 关键操作：
  • 推送页面：stackView.push("Page.qml") 或 stackView.push(component)；
  • 返回上一页：stackView.pop()（自动销毁顶部页面）；
  • 状态判断：通过 stackView.depth 确定是否显示返回按钮（depth > 1 时显示）。

2.2 界面布局解析

2.2.1 ToolBar：动态切换导航图标

header: ToolBar {
    contentHeight: toolButton.implicitHeight // 自适应按钮高度
    ToolButton {
        id: toolButton
        // Unicode图标动态切换：返回箭头（◀） vs 汉堡菜单（☰）
        text: stackView.depth > 1 ? "\u25C0" : "\u2630" 
        font.pixelSize: Qt.application.font.pixelSize * 1.6 // 放大图标字体
        onClicked: {
            stackView.depth > 1 ? stackView.pop() : drawer.open() // 深度判断逻辑
        }
    }
    Label {
        text: stackView.currentItem.title // 动态显示当前页面标题
        anchors.centerIn: parent
    }
}

• 设计要点：
  • 图标使用 Unicode 字符（\u25C0、\u2630），无需额外图标文件；
  • 通过 stackView.currentItem.title 实现标题动态绑定。

2.2.2 Drawer：侧边导航菜单

Drawer {
    id: drawer
    width: window.width * 0.66 // 占屏幕宽度2/3，适配移动端手势操作
    height: window.height
    Column {
        anchors.fill: parent
        spacing: 12 // 导航项垂直间距
        // 导航项1：概述页（推送QML文件）
        ItemDelegate {
            text: qsTr("概述")
            onClicked: {
                stackView.push("Profile.qml") // 推送页面到堆栈
                drawer.close() // 点击后关闭抽屉
            }
        }
        // 导航项2：关于页（推送组件实例）
        ItemDelegate {
            text: qsTr("关于")
            onClicked: { stackView.push(aboutPage); drawer.close() }
        }
    }
}

• 组件化优势：
  • 导航项可灵活配置为 QML 文件或预定义组件（如aboutPage）；
  • ItemDelegate 自动适配 Material 或 Fusion 风格。

2.2.3 StackView：页面堆栈容器

StackView {
    id: stackView
    anchors.fill: parent // 撑满整个窗口
    initialItem: Home {} // 初始页面（主页）
    // 页面切换动画（可选）
    transition: StackView.transition // 默认滑动过渡效果
}

性能优化：

• 自动管理页面生命周期（创建 / 销毁），减少内存占用；

• 支持自定义过渡动画（如缩放、渐隐渐显）。

三、组件实现：分层页面设计

3.1 Home 页：根级入口

// Home.qml
import QtQuick.Controls
Page {
    title: qsTr("主页") // 标题自动显示在ToolBar中
    Label {
        anchors.centerIn: parent
        text: qsTr("主页界面")
        font.pointSize: 16 // 增大字体提升可读性
    }
}

• 基础组件：
  • Page 组件自动处理边距和背景，适配不同平台风格；
  • 标题通过 stackView.currentItem.title 同步到工具栏。

3.2 Profile 和编辑页：层级钻取

3.2.1 Profile 页（概述页）

// Profile.qml
import QtQuick.Controls
Page {
    title: qsTr("概述")
    Column {
        anchors.centerIn: parent
        spacing: 20
        Label {
            text: qsTr("个人信息概述")
            font.bold: true // 加粗标题
        }
        Button {
            text: qsTr("编辑")
            onClicked: stackView.push("EditProfile.qml") // 进入下一级页面
        }
    }
}

• 交互链：
  主页 → 概述页 → 编辑页，通过 stackView.push 构建导航层级。

3.2.2 编辑页（EditProfile.qml）

// EditProfile.qml
import QtQuick.Controls
Page {
    title: qsTr("编辑概述")
    Label {
        anchors.centerIn: parent
        text: qsTr("此处可添加表单组件（如TextInput）")
        wrapMode: Text.WordWrap // 文本自动换行
    }
}

• 扩展方向：
  可添加 TextInput、ComboBox 等表单组件，实现数据编辑功能。

3.3 关于页：组件化复用

// main.qml 中定义组件
Component {
    id: aboutPage // 可复用的关于页组件
    About {
        title: qsTr("关于")
        version: "V1.0.0" // 假设About组件支持属性传入
    }
}

// About.qml（假设实现）
import QtQuick.Controls
Item {
    property string version // 版本号属性
    Page {
        title: title
        Label {
            text: qsTr("应用版本: ") + version
            anchors.centerIn: parent
        }
    }
}

• 复用价值：
  通过Component定义可配置的关于页，支持属性传递（如version），提升组件灵活性。

四、总结

核心技术点

1. StackView 核心 API：
   • push()：压入新页面，增加堆栈深度；
   • pop()：弹出当前页面，返回上一层；
   • depth：获取当前堆栈深度，驱动导航逻辑。
2. 导航组件配合：
   • Drawer 提供全局导航入口，ToolBar 实现层级返回；
   • 通过 Component 复用页面组件，减少代码冗余。

扩展场景

• 动画增强：通过 Transition 自定义页面切换效果（如左右滑动、淡入淡出）；
• 数据传递：利用 stackView.currentItem 访问页面属性，实现跨页数据通信；
• 权限控制：在 push 前校验权限，动态决定是否允许进入某页面。