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,可能为空
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值