QtQuick堆栈窗口

这个好像在之前的版本就有了,QtQuick的堆栈窗口 depth表示当前堆栈中的窗口数量,每一个窗口可以是一个自定义组件 也可以是一个url。push添加新窗口,pop返回上层。在AppXXXWindow下,顶部导航会遮挡堆栈窗口。因此要写逻辑隐藏,他有一个initialItem属性,是默认的第一个堆栈窗口,也就是顶层窗口。每一个push的窗口有自己的内存,不会因为push相同的id而造成数据混乱

ApplicationWindow {
    id:root
    visible: true;
    height: 480;
    width: 320;
    property real pixelDensity: 4.46
    property real multiplierH: root.height/480 //default multiplier, but can be changed by user
     property real multiplierW: root.width/320 //default multiplier, but can be changed by user
    function dpH(numbers) {

        return Math.round(numbers*((pixelDensity*25.4)/160)*multiplierH);
    }
    function dpW(numbers) {

        return Math.round(numbers*((pixelDensity*25.4)/160)*multiplierW);
    }
    property color  accentcol:"red"
    property color  backgroundcol:"white"
    property color  foregroundcol:"#000000"
    property color  primarycol:"blue"
    Material.accent:accentcol
    Material.background:backgroundcol
    Material.foreground:foregroundcol
    Material.primary: primarycol

        header: ToolBar{
            id:hd;
            visible: stackView.depth>1?false:true

            height: stackView.depth>1?0:dpH(72)
                Text{
                    text:"hello";
                    anchors.centerIn: parent
                    color: "white";
                }
            }

        SwipeView{
            id:sw;
            anchors.fill: parent;
            currentIndex: footertabBar.currentIndex;
            Page1{

            }
            Item{
            StackView {
                property int  cur: 0;
                id: stackView;

                anchors.fill: parent

                initialItem: Pane {
                    id: pane
                    padding: 10
                    ColumnLayout{
                        Label{
                            text:stackView.cur ;
                        }

                        Button{
                            text:"push";
                            onClicked: { 
                                stackView.push(subpage)
                            }
                        }
                    }


                }
            }
        }
}

Component{
    id:subpage;

    Item{
        ToolBar{
            id:bar;
         width: root.width;
         anchors.top: root.top
         height: dpH(72)
         Row{
             id:row;
            anchors.fill: parent
             Text{
                 height: parent.height;
                 text:"<----";
                 verticalAlignment: Text.AlignVCenter

                 anchors.verticalCenter : parent.verticalCenter
                 color: "white";
                 MouseArea{
                     anchors.fill: parent;
                     onClicked: {
                         stackView.depth;
                         stackView.pop();
                     }
                 }
             }

             Text{
                 text:"当前序号:"+stackView.depth;
                 anchors.centerIn: parent
                 color: "white";
             }

             Text{
                 height: parent.height;
                 text:"---->";
                 verticalAlignment: Text.AlignVCenter

                 anchors.verticalCenter : parent.verticalCenter
                 anchors.right: parent.right
                 color: "white";
                 MouseArea{
                     anchors.fill: parent;
                     onClicked: {
                         stackView.push(subpage)

                     }
                 }
             }

         }


         }
        ColumnLayout{
            anchors.top:bar.bottom
            width: parent.width
            height: parent.height
            Rectangle{
                anchors.fill: parent;
                color:Qt.rgba( Math.random(255),
                               Math.random(255),
                               Math.random(255),
                               Math.random(255));
            }


        }
    }
}
    footer: TabBar {
        id: footertabBar
      currentIndex: sw.currentIndex
        TabButton {

            text: qsTr("footer Tab1");
        }

        TabButton {
            text: qsTr("footer Tab2")
        }
        TabButton {
            text: qsTr("footer Tab3")
        }

    }
}