QML中使用StackView实例

参考：https://blog.csdn.net/cqltbe131421/article/details/83148918
这个是简单的应用。
原作者在github上放上了源码，能在实际中用，方便进行子界面切换：
地址：https://github.com/cedoduarte/QML_StackView_example

上代码：
main.qml文件：

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    header: ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: qsTr("‹")
                onClicked: mystackview.pop()
            }
            Label {
                text: qsTr("Stackview Example App")
                elide: Label.ElideRight
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
        }
    }

    StackView {
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            top: header.bottom
        }

        id: mystackview
        initialItem: starting_page
    }

    Component {
        id: starting_page
        StartingPage {}
    }
    Component {
        id: second_page
        SecondPage {}
    }
    Component {
        id: third_page
        ThirdPage {}
    }
    Component {
        id: fourth_page
        FourthPage {}
    }

    function load_page(page) {
        switch (page) {
        case 'Page 1':
            mystackview.push(starting_page);
            break;
        case 'Page 2':
            mystackview.push(second_page);
            break;
        case 'Page 3':
            mystackview.push(third_page);
            break;
        case 'Page 4':
            mystackview.push(fourth_page);
            break;
        }
    }
}

第一个界面StartingPage.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Item {
    RowLayout {
        anchors.centerIn: parent
        width: parent.width
        Button {
            text: 'Page 1'
            Layout.fillWidth: true
            onClicked: {
                load_page(text);
            }
        }
        Button {
            text: 'Page 2'
            Layout.fillWidth: true
            onClicked: {
                load_page(text);
            }
        }
        Button {
            text: 'Page 3'
            Layout.fillWidth: true
            onClicked: {
                load_page(text);
            }
        }
        Button {
            text: 'Page 4'
            Layout.fillWidth: true
            onClicked: {
                load_page(text);
            }
        }
    }
}

第二个界面SecondPage.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Item {
    ListView {
        width: parent.width
        height: parent.height
        anchors.centerIn: parent
        spacing: 10
        model: ListModel {
            ListElement {
                name: 'Pedro'
                age: 30
            }
            ListElement {
                name: 'Juan'
                age: 23
            }
            ListElement {
                name: 'Ana'
                age: 19
            }
            ListElement {
                name: 'Luisa'
                age: 25
            }
        }
        delegate: Rectangle {
            width: parent.width
            height: 20
            color: 'red'
            Text {
                anchors.centerIn: parent
                color: 'white'
                text: 'Name: ' + name + ', Age: ' + age
                font.pointSize: 20
            }
        }
    }
}

第三个界面ThirdPage.qml：

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Item {
    ColumnLayout {
        anchors.centerIn: parent
        Repeater {
            model: ListModel {
                ListElement {
                    page: 'Page 1'
                }
                ListElement {
                    page: 'Page 2'
                }
                ListElement {
                    page: 'Page 3'
                }
                ListElement {
                    page: 'Page 4'
                }
                ListElement {
                    page: 'Page 5'
                }
            }
            Button {
                text: page
                onClicked: {
                    load_page(text);
                }
            }
        }
    }
}

第四个界面FourthPage.qml：

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Item {
    Rectangle {
        anchors.fill: parent
        color: 'green'
        Button {
            anchors.centerIn: parent
            text: 'Exit'
            onClicked: {
                Qt.quit();
            }
        }
    }
}

分析代码：
在main.qml中只有StackView，这个组件填充了主界面，通过Componet加载各个子界面：

Component {
        id: starting_page
        StartingPage {}
    }
    Component {
        id: second_page
        SecondPage {}
    }
    Component {
        id: third_page
        ThirdPage {}
    }
    Component {
        id: fourth_page
        FourthPage {}
    }

切换界面函数用的是js函数：

 function load_page(page) {
        switch (page) {
        case 'Page 1':
            mystackview.push(starting_page);
            break;
        case 'Page 2':
            mystackview.push(second_page);
            break;
        case 'Page 3':
            mystackview.push(third_page);
            break;
        case 'Page 4':
            mystackview.push(fourth_page);
            break;
        }
    }

在子界面中，也是调用load_page函数进行切换界面。
运行界面：

其余界面就不在这里一一列出了，参考原作者的github源码，还有另外一个博客地址，基本弄清楚怎么使用StackView。