QML学习记录:嵌套页面的实现

StackView是一个QML组件，用于管理和显示多个页面。它提供了向前和向后导航的功能，可以在堆栈中推入新页面，并在不需要时将页面弹出。

ApplicationWindow {
    id:root
    visible: true
    width: 340
    height: 480
    title: qsTr("Stack")

   // 抽屉: 侧滑菜单
Drawer{
    id:drawer
    width:parent.width*0.66 // 设置抽屉的宽度为父项宽度的 0.66 倍
    height: parent.height // 设置抽屉的高度为父项的高度

    Column {
        anchors.fill: parent // 将列填充满父项
        ItemDelegate { // 第一个 ItemDelegate，用于“Profile”选项
            text: "Profile"
            width: parent.width // 将宽度设置为父项的宽度
            highlighted: ListView.isCurrentItem // 当前项是否被高亮显示
            onClicked: {
                stackview.push("Profile.qml") // 点击时将 "Profile.qml" 页面推送到 StackView 中
                drawer.close() // 关闭抽屉
            }
        }
        ItemDelegate { // 第二个 ItemDelegate，用于“About”选项
            text: "About"
            width: parent.width // 将宽度设置为父项的宽度
            highlighted: ListView.isCurrentItem // 当前项是否被高亮显示
            onClicked: {
                stackview.push("About.qml") // 点击时将 ""About.qml"" 页面推送到 StackView 中
                drawer.close() // 关闭抽屉
            }
        }
    }
}

header: ToolBar { // 标题栏
    Material.background: Material.Orange // 标题栏的背景颜色
    Label { // 标题栏的标题
        text: stackview.currentItem.title // 显示当前页面的标题
        font.pixelSize: 25 // 字体像素大小
        anchors.centerIn: parent // 居中对齐于父项
    }
    ToolButton { // 标题栏的工具按钮
        text: stackview.depth > 1 ? "◀" : "☰" // 根据 StackView 的深度设置文本，大于1显示"◀"，否则显示"☰"
        font.pixelSize: Qt.application.font.pixelSize * 1.6 // 字体像素大小
        onClicked: {
            if(stackview.depth > 1) {
                stackview.pop() // 当深度大于1时，返回上一页
            } else {
                drawer.open() // 否则，打开抽屉
            }
        }
    }
}

StackView {
    id: stackview // 用于显示页面的 StackView
    anchors.fill: parent // 填充父项
    initialItem: Home{} // 初始页面为 Home.qml
}
    }

Home.qml

import QtQuick 2.0
import QtQuick.Controls 2.3
Page {
    title: "Home"
    Label{
        anchors.centerIn: parent
        text: "Home Screen"
    }
}

“About.qml”

import QtQuick 2.0
import QtQuick.Controls 2.3
Page {
    title: "About"
    Label{
        anchors.centerIn: parent
        text: "About Screen"
    }
}

Profile.qml

import QtQuick 2.0
import QtQuick.Controls 2.3
Page {
    title: "Profile"
    Label{

            anchors.horizontalCenter: horizontalCenter
            text: "Profile Screen"
        }
 

}

这段代码展示了一个带有侧滑菜单和标题栏的界面，在StackView中显示多个页面。
Drawer界面是一个侧滑菜单，它包含了两个ItemDelegate：Profile和About。当点击其中一个ItemDelegate时，它会通过stackview.push()方法将相应的页面推送到StackView中，并关闭Drawer。
标题栏位于Drawer之上，并包含一个Label用于显示当前页面的标题。标题栏还包含一个ToolButton，其文本基于StackView的深度设置。当StackView的深度大于1时，ToolButton文本显示为"◀"，表示返回上一页；否则，文本显示为"☰"，表示打开Drawer。
StackView是实际用于显示页面的部分。在上面的代码中，它设置为填充父项，并且初始页面是Home。