QML之StackView

QML中SatckView

StackView管理着view页面的生命周期，提供了页面的栈式导航。这些view页面可能有业务需要，根据业务需要，可以一级一级向深处跳转，根据当前view的状态与设定的情况，可能产生一个新view或者返回之前view

比如：注册账号分步骤，输入用户名，密码，点击下一步之后，出现新页面，输入兴趣爱好等

//定义一个StackView

ApplicationWindow{    title:"StckViewDemo"    visible:true    height:300    width:530    StackView {        id:stack;        anchors.fill:parent        width:600        height:300        property var home :null;        Text {            text:"Cloxk to create first page"            font.pointSize: 14            font.bold: true            color: "blue"            anchors.centerIn: parent            MouseArea{                anchors.fill: parent                onClicked:                     if(stack.depth==0)                       stack.push(page);            }        }}Component {            id: page            Rectangle {                color: Qt.rgba(stack.depth*0.1,stack.depth*0.2,stack.depth*0.3);                Text {                    anchors.centerIn: parent;                    text: "depth-"+stack.depth;                    font.pointSize: 24;                    font.bold: true                    color: stack.depth<=4?Qt.lighter(parent.color):Qt.darker(parent.color);                    }                Button{                    id:next;                    anchors.right: parent.right;                    anchors.bottom: parent.bottom;                    anchors.margins: 8;                    text:"Next"                    width:70                    height: 30;                    onClicked: {                        if(stack.depth<8)                            stack.push(page);                    }                }            Button{                id:back;                anchors.right: next.left;                anchors.top: next.top;                anchors.rightMargin: 8;                text:"Back"                width:70                height: 30;                onClicked: {                    if(stack.depth>0)                        stack.pop();                }            }            Button{                id:home;                anchors.right: back.left;                anchors.top: next.top;                anchors.rightMargin: 8;                text:"Home"                width:70                height: 30;                onClicked: {                    if(stack.depth>0)                        stack.pop(stack.initialItem);                }            }            Button{                id:clear;                anchors.right: home.left;                anchors.top: next.top;                anchors.rightMargin: 8;                text:"Clear"                width:70                height: 30;                onClicked: {                    if(stack.depth>0)                        stack.clear();                }            }            }        }}

StackView的方法

clear():干掉StackView的所有页面pop():出栈操作。无参调用pop，弹出栈顶页面，带参数则将参数指定额页面之后的所有页面弹出。如[A,B,C,D,E],pop()调用后，就变为[A,B,C,D]。再次调用pop(B),会变成[A,B]push():压入页面。一般是动态创建的。如栈是[A,B,C,D],push(E,replace),就会用E替换栈顶的D，栈会变成[A,B,C,E]find(func,onlySearchLoadedItems):查找StackView管理的某个页面。find将对栈内每个页面应用func方法，当func返回true，表示找到，停止查找。然后find返回找到的那个itemcompleteTransition():立即结束过渡动画

StackView的属性

busy指示SatckView是否正在应用过渡动画。为true时表示正在应用动画，可以通过onBusyChanged来响应busy属性变化，如在动画期间禁止点击操作delegate可以指定页面切换的过渡动画，不使用delegate，默认情况下就使用StackView的切换动画depth栈深度，栈为空则为0，有子页面则从1开始initialItem初始化View(Item)。可以通过这个属性来指定StackView管理的第一个页面(View)，如果你在初始化时给InitialItem赋值，效果就相当于在Component.onCompleted信号处理器中调用push(yourItem)。如果不显示给initialItem赋值，那么第一个页面被push进StackView时候，这个属性会被自动赋currentItem指向栈顶的View，可能为空