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返回找到的那个item completeTransition():立即结束过渡动画

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，可能为空