qml中StackView的使用

main.qml

//main.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQml 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480

    header: ToolBar {
        contentHeight: toolButton.implicitHeight

        RowLayout {
            anchors.fill: parent
            ToolButton {
                id: toolButton
                text: stackView.depth > 1 ? "\u25C0" : "\u2630"
                font.pixelSize: Qt.application.font.pixelSize * 1.6
                onClicked: {
                    if (stackView.depth > 1) {
                        stackView.pop()
                    } else {
                        drawer.open()
                    }
                }
            }

            Label {
                text: drawer.txt
            }
        }
    }

    //抽屉式的窗口结构
    Drawer {
        id: drawer
        width: window.width * 0.5
        height: window.height

        property string txt: "第一页"

        Column {
            anchors.fill: parent
            ItemDelegate {
                text: qsTr("第一页")
                width: parent.width
                onClicked: {
                    drawer.txt = "第一页"
                    stackView.push(firstPage)
                    drawer.close()
                }
            }
            ItemDelegate {
                text: qsTr("第二页")
                width: parent.width
                onClicked: {
                    drawer.txt = "第二页"
                    stackView.push(secondPage)
                    drawer.close()
                }
            }
            ItemDelegate {
                text: qsTr("第三页")
                width: parent.width
                onClicked: {
                    drawer.txt = "第三页"
                    stackView.push("ThirdPage.qml")
                    drawer.close()
                }
            }
        }
    }

    //堆叠窗口结构
    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: firstPage
        function switchFirstPage() {
            stackView.push(firstPage)
        }
    }

    //每一个子窗口
    Component {
        id: firstPage
        FirstPage {}
    }
    Component {
        id: secondPage
        SecondPage {}
    }
    Component {
        id: thirdPage
        ThirdPage {}
    }
}

FristPage.qml

//Firstpage.qml
import QtQuick 2.12
import QtQuick.Controls 2.12

Page {
    header: Label {
        text: qsTr("第一页")
        font.pixelSize: Qt.application.font.pixelSize * 2
        padding: 10
    }
    Rectangle {
        width: 100
        height: 100
        color: "red"
    }
}

SecondPage.qml

//Secondpage.qml
import QtQuick 2.9
import QtQuick.Controls 2.2

Page {
    id:scondPage
    header: Label {
        text: qsTr("第二页")
        font.pixelSize: Qt.application.font.pixelSize * 2
        padding: 10
    }
    Column {
        anchors.centerIn: parent
        spacing: 10
        Label {
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("第二页的内容")
        }
        Button {
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("切换到第一页")
            //通过stackView的方法来实现界面切换
            onClicked:{
                stackView.switchFirstPage();
            }
            background: Rectangle{
                gradient: Gradient {
                    GradientStop { color: "#a18cd1" ; position: 0 }
                    GradientStop { color: "#fbc2eb" ; position: 1 }
                }
            }
        }
    }
}

ThirdPage.qml

//Thirdpage.qml
import QtQuick 2.12
import QtQuick.Controls 2.12

Page {
    header: Label {
        text: qsTr("第三页")
        font.pixelSize: Qt.application.font.pixelSize * 2
        padding: 10
    }
    Label {
        text: qsTr("Page Info")
        anchors.centerIn: parent
        font.pixelSize: Qt.application.font.pixelSize * 2
    }
}