4.4 嵌套页面

一、案例目标和效果展示

这里通过 Drawer，就是一个侧滑菜单（如图2所示），来实现一个嵌套页面的小案例，了解一下嵌套页面是如何实现的。

图1

图2

图3

 二、大概原理说明

从工程目录可以看到，每个子页面都是一个独立的qml文件，我们是通过侧滑菜单将它们关联到一起。

在侧滑菜单里有多个项，当我们点击项时，就会触发子页面的打开动作，子页面就会显示出来啦！

图4

当我们点击具体项时，通过 stackView.push("Profile.qml")这行代码将项显示出来。push 里面的参数是一个qml文件，这个文件就是我们提前写好的一个简单页面。

这样就关联起来了，是不是很简单？

下面我们再看看具体代码，代码里面我或多或少写了一些备注，就不一一细说了。 如果需要源文件，可以私我。

三、具体实现代码

CMakeLists.txt

cmake_minimum_required(VERSION 3.16)

project(demo_1 VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)
find_package(Qt6 REQUIRED COMPONENTS QuickControls2)

qt_standard_project_setup()

qt_add_executable(appdemo_1
    main.cpp
)

qt_add_qml_module(appdemo_1
    URI demo_1
    VERSION 1.0
# 一般在项目中添加新的qml文件之后，编译器会自动在下面生成一句：QML_FILES Home.qml，但是也可以直接写在这行代码后面，更简洁一些，自动生成的要删除掉
    QML_FILES Main.qml Home.qml Profile.qml About.qml EditProfile.qml
    RESOURCES images/icon.ico
)

# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
# If you are developing for iOS or macOS you should consider setting an
# explicit, fixed bundle identifier manually though.
set_target_properties(appdemo_1 PROPERTIES
#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appdemo_1
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

target_link_libraries(appdemo_1
    PRIVATE Qt6::Quick
)
target_link_libraries(appdemo_1 PRIVATE Qt6::QuickControls2)

include(GNUInstallDirs)
install(TARGETS appdemo_1
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

Main.qml

import QtQuick
import QtQuick.Controls //若要使用控件，则导入该包

/*
在 Qt Quick / QML 中，ApplicationWindow 和 Window 都是用于创建窗口的组件，但它们在使用和目的上有一些区别。
ApplicationWindow：
ApplicationWindow 是 Qt Quick Controls 2 模块的一部分，它提供了一个完整的、装饰过的窗口，通常具有标题栏、边框、关闭按钮等。
ApplicationWindow 通常用作应用程序的主窗口，因为它提供了窗口管理的功能，如最大化、最小化和关闭。
它还提供了菜单和工具栏的支持，允许你添加应用程序级别的菜单项。
ApplicationWindow 的主要目的是提供一个易于使用和标准化的用户界面，适合那些希望遵循平台特定的窗口样式指南的应用程序。

Window：
Window 是 Qt Quick 模块的一部分，它提供了一个基本的、无装饰的窗口，没有标题栏、边框等。
Window 通常用于需要更多自定义和控制的应用程序，因为它允许你直接控制窗口的外观和行为。
由于 Window 是无装饰的，因此你需要自己处理窗口管理，如移动、调整大小和关闭。
Window 更适合那些需要高度自定义外观和行为的应用程序，或者那些不需要标准窗口装饰的应用程序。
总的来说，选择使用 ApplicationWindow 还是 Window 取决于你的具体需求。
如果你希望快速创建一个具有标准外观和行为的应用程序窗口，那么 ApplicationWindow 是一个不错的选择。
而如果你需要更多的自定义和控制，或者正在开发一个需要特定外观和行为的特殊应用程序，那么 Window 可能更适合你。
*/

ApplicationWindow { // Window -> ApplicationWindow
    id: wd
    width: 640
    height: 480
    visible: true
    title: qsTr("Stack")

    header: ToolBar {
        ToolButton {
            text: stackView.depth > 1 ? "\u25C0" : "\u2630" // \u25C0是小实心三角形，\u2630是三道杠
            font.pixelSize: Qt.application.font.pixelSize *1.6 // 调大字体

            onClicked: {
                if (stackView.depth > 1) {
                    stackView.pop()
                }
                else {
                    drawer.open()
                }
            }
        }

        Label {
            text: stackView.currentItem.title
            anchors.centerIn: parent
        }
    }

    Drawer { //侧滑菜单
        id: drawer
        width: wd.width *0.2
        height: wd.height

        Column {
            anchors.fill: parent

            ItemDelegate {
                text: "Profile"
                width: parent.width
                onClicked: {
                    stackView.push("Profile.qml")
                    drawer.close()
                }
            }

            ItemDelegate {
                text: "About"
                width: parent.width
                onClicked: {
                    stackView.push(aboutPage)
                    drawer.close()
                }
            }
        }
    }

    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: Home {}
    }

    Component {
        id: aboutPage

        About {}
    }
}

Profile.qml

import QtQuick
import QtQuick.Controls

Page { // 容器控件，可以方便地将页眉和页脚项添加到页面中
    title: "Profile"

    Column {
        spacing: 10
        anchors.centerIn: parent

        Label {
            anchors.horizontalCenter: parent.horizontalCenter // 水平居中
            text: "Profile Screen"
        }

        Button {
            text: "Edit"
            onClicked: stackView.push("EditProfile.qml")
            anchors.horizontalCenter: parent.horizontalCenter // 水平居中
        }
    }
}

Home.qml

import QtQuick
import QtQuick.Controls

Page { // 容器控件，可以方便地将页眉和页脚项添加到页面中
    title: "Home"

    Label {
        anchors.centerIn: parent
        text: "Home Screen"
    }
}

About.qml

import QtQuick
import QtQuick.Controls

Page { // 容器控件，可以方便地将页眉和页脚项添加到页面中
    title: "About"

    Label {
        anchors.centerIn: parent
        text: "About Screen"
    }
}

EditProfile.qml

import QtQuick
import QtQuick.Controls

Page { // 容器控件，可以方便地将页眉和页脚项添加到页面中
    title: "Edit Profile"

    Label {
        anchors.centerIn: parent
        text: "Edit…"
    }
}

四、结语

持续稳定更新文章的热心博主，完全值得你关注一手！