第 10 课：Loader、StackView 和页面导航

更新: 10/23/2026 字数: 0 字 时长: 0 分钟

这一课学多页面应用怎么组织：

1. Component：内联定义组件
2. Loader：按需加载组件
3. StackView：页面栈导航

使用 Component、Loader 与 StackView 实现页面加载和导航

1. Component：内联组件

前面自定义组件是独立 .qml 文件。Component 允许在同一个文件里定义可复用块：

Component {
    id: pageA
    Rectangle {
        color: "lightblue"
        Label {
            anchors.centerIn: parent
            text: "页面 A"
        }
    }
}

Component 本身不显示，它只是一个“模板”，需要被实例化。

---

2. Loader：按需加载

Loader 可以动态加载一个 QML 文件或一个 Component：

Loader {
    id: loader
    anchors.fill: parent
    source: "PageA.qml"
}

或者加载内联组件：

Loader {
    id: loader
    anchors.fill: parent
    sourceComponent: pageA
}

常用属性：

• source：QML 文件路径
• sourceComponent：内联 Component
• active：是否加载，设为 false 会卸载
• item：加载后的对象，未加载时为 null
• onLoaded：加载完成信号

Loader 适合：按需加载、延迟初始化、简单页面切换。

---

3. StackView：页面栈

StackView 是更完整的页面导航容器，自带页面栈和切换动画。

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 420
    height: 480
    visible: true
    title: "第十课"

    StackView {
        id: stack
        anchors.fill: parent
        initialItem: pageA
    }

    Component {
        id: pageA
        Rectangle {
            color: "lightblue"

            Column {
                anchors.centerIn: parent
                spacing: 12

                Label {
                    text: "页面 A"
                    font.pixelSize: 28
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Button {
                    text: "去页面 B"
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: stack.push(pageB)
                }
            }
        }
    }

    Component {
        id: pageB
        Rectangle {
            color: "lightyellow"

            Column {
                anchors.centerIn: parent
                spacing: 12

                Label {
                    text: "页面 B"
                    font.pixelSize: 28
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Button {
                    text: "返回"
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: stack.pop()
                }
            }
        }
    }
}

核心 API：

• initialItem：初始页面
• push(component)：压入新页面
• pop()：弹出当前页面，返回上一页
• replace(component)：替换当前页面，不保留历史
• depth：当前栈深度
• currentItem：当前页面对象

StackView 自带页面切换动画，也支持自定义 pushEnter、pushExit、popEnter、popExit 过渡。

---

4. 什么时候用哪个

场景	推荐
简单按需加载、延迟初始化	Loader
多页面导航、前进后退	StackView
横向滑动切换标签页	SwipeView + TabBar
弹窗、浮层	Popup / Dialog

你的动手练习

练习 1

把第 9 课的水果列表放进 StackView 的第一个页面，再加一个“关于”页面，从水果页点按钮进入，关于页能返回。

练习 2

用 Loader 实现两个页面切换：

• 两个按钮：“显示 A”、“显示 B”
• 点击时把 loader.sourceComponent 切换成 pageA 或 pageB

练习 3

用 StackView 做三级导航 A → B → C，每级都有“返回”按钮，并且在页面里显示当前 stack.depth。

练习 4（思考题）

StackView.push() 和 StackView.replace() 的区别是什么？
如果用户从 A 进 B，再从 B 进 C，然后一直点返回，用 push 和用 replace 分别会发生什么？