Qt基于Qml堆栈(StackView)窗口使用示例_qml stack

演示效果:

1.声明窗口栈

//窗口栈
    StackView {
        id: stack
        initialItem: mainView
        anchors.fill: parent
    }

2.指定页面窗口栈

page1.stack = stack;//设置页面栈

3.入栈

stack.push(page1);//入栈

4.出栈

onClicked: stack.pop(); //出栈

完整QML源码:

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
    id: frmWindow
    title: qsTr("Qt基于Qml堆栈(StackView)窗口使用示例")
    width: 400
    height: 300
    visible: true
    //窗口栈
    StackView {
        id: stack
        initialItem: mainView
        anchors.fill: parent
    }
 
    Page {
        id: mainView
 
        Label{
            text: qsTr("Home")
            height: 80
            width: 240
            anchors.centerIn: parent
            font.pixelSize: 20
        }
        Button {
            height: 32
            width: 120
            text: qsTr("Setting")
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            onClicked: {
                page1.visible = true;
                page1.stack = stack;//设置页面栈
                stack.push(page1);//入栈
            }
        }
    }
 
    Page1 {
        id: page1
        visible: false
    }
}

page1.qml

import QtQuick 2.8
import QtQuick.Controls 2.1
 
Page {
    id: frmWindow
    title: qsTr("设置")
    visible: true
 
    property StackView stack: null
 
    Button {
        height: 32
        width: 120
        text: "Pop"
        anchors.left: parent.left
        anchors.top: parent.top
        onClicked: stack.pop(); //出栈
    }
 
    Label{
        id: label
        text: qsTr("Setting Page")
        height: 80
        width: 240
        anchors.centerIn: parent
        font.pixelSize: 20
    }
 
    Button {
        height: 32
        width: 120
        text: qsTr("MySet")
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        onClicked: {
            page2.visible = true;
            page2.stack = stack;//设置窗口栈
            stack.push(page2);//入栈
        }
    }
 
    Page2 {
        id: page2
        visible: false
    }
}

page2.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
 
Page {
    id: frmWindow
    title: qsTr("MySet")
    visible: true
 
    property StackView stack: null
 
    Button {
        height: 32
        width: 120
        text: "Pop"
        anchors.left: parent.left
        anchors.top: parent.top
        onClicked: stack.pop();//出栈
    }
 
    Label{
        id: label
        text: qsTr("MySet")
        height: 80
        width: 240
        anchors.centerIn: parent
        font.pixelSize: 20
    }
 
    Button {
        height: 32
        width: 120
        text: qsTr("Account")
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        onClicked: {
            page3.visible = true;
            page3.stack = stack;//设置窗口栈
            stack.push(page3);//入栈
        }
    }
 
    Page3 {
        id: page3
        visible: false
        stack: stack
    }
}

page3.qml

import QtQuick 2.8
import QtQuick.Controls 2.1
 
Page {
    id: frmWindow
    title: qsTr("帐号")
    visible: true
 
    property StackView stack: null
 
    Button {
        height: 32
        width: 120
        text: "Pop"
        anchors.left: parent.left
        anchors.top: parent.top
        onClicked: stack.pop();//出栈
    }
 
    Label{
        id: label
        text: qsTr("帐号")
        height: 80
        width: 240
        anchors.centerIn: parent
        font.pixelSize: 20
    }
 
    Label{
        anchors.top: label.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: qsTr("帐号信息")
        height: 80
        width: 240
        font.pixelSize: 20
    }
}