qml StackView 界面切换应用

效果演示：

https://v.qq.com/x/page/f0955dskgit.html?url_from=share&second_share=0&share_from=copy

代码：

main.qml---------------------------------------------------------------------------------------------------------------------------

import QtQuick 2.12

import QtQuick.Window 2.2

import QtQuick.Controls 1.4

Window {

    readonly property var pagesUrl: ["Mypage1.qml",

                                    "Page2.qml",

                                    "Page3.qml",

                                    "Page4.qml",

                                    "Page5.qml"]

    visible: true

    width: 640

    height: 480

    title: qsTr("StackViewTest")

    StackView

    {

        id:mystackview;

        width:640

        height: 400

        initialItem: page1

    }

    Row{

        id: statusBar

        height: 80

        anchors.bottom: parent.bottom

        anchors.bottomMargin: 10

        anchors.left: parent.left

        anchors.leftMargin: 10

        anchors.right: parent.right

        anchors.rightMargin: 10

        spacing: 10

        visible: true

        Button {

            id:btn1

            width:100

            height: 40

            anchors.left: parent.left

            anchors.leftMargin: 20

            text: qsTr("pageup")

            onClicked: {

                pageRuning("pageup");

            }

        }

        Button {

            id:btn2

            width:100

            height: 40

            text: qsTr("pagehome")

            anchors.horizontalCenter: parent.horizontalCenter

            onClicked: {

                pageRuning("pagehome");

            }

        }

        Button {

            width:100

            height: 40

            anchors.right: parent.right;

            anchors.rightMargin: 20

            text: "pagedown"

            onClicked: {

                pageRuning("pagedown");

            }

        }

    }

    function pageRuning(cmd)

    {

        switch(cmd)

        {

        case "pageup":

                        if(mystackview.depth<5)

                        {

                            mystackview.push(Qt.resolvedUrl(pagesUrl[mystackview.depth]))

                        }

            break;

        case "pagedown":

                        if(mystackview.depth>0)

                         mystackview.pop();

            break;

        case "pagehome":

                        mystackview.pop(mystackview.initialItem);

            break;

        }

    }

    Component{

        id:page1

        Mypage1{}

    }

    Component{

        id:page2

        Page2{}

    }

    Component{

        id:page3

        Page3{}

    }

    Component{

        id:page4

        Page4{}

    }

    Component{

        id:page5

        Page5{}

    }

}

 

 

Mypage1.qml------------------------------------------------------------------

import QtQuick 2.0

Item {

    Rectangle

    {

        anchors.centerIn: parent

        Text {

            id: name

            text: qsTr("Im page 1")

        }

    }

}

Page2.qml-------------------------------

import QtQuick 2.0

Item {

    Rectangle

    {

        anchors.centerIn: parent

        Text {

            id: name

            text: qsTr("Im page 2")

        }

    }

}

....Page3 Page4 Page5 都一样，只是显示的text不一样。  看手册pop(item)出栈操作如[abcdef]，调用pop(a)就变成[a],测试中现象却不一样。