SwipeView和page

本文介绍了一种使用SwipeView实现多页面切换并结合TabBar进行底部标签导航的设计方案。SwipeView能够显示多个页面,并支持左右滑动切换,而TabBar则用于指示当前页面并允许用户点击切换。通过currentIndex属性的双向绑定实现了两者的同步。

SwipeView元素一般用来在ApplictionWindow中占用除页头和页脚之外的区域,他可以包含page,用来显示多个页面,用来和页面导航交相辉映。SwipeView默认有左右滑动效果,会触发切换到下一个page的行为

  SwipeView{
        id:sv;
        anchors.fill: parent;
        currentIndex: footertabBar.currentIndex
        Page{
            Text {
                text:"第一页"
            }
            Slider{
                from:0;
                to:100
                anchors.centerIn: parent
            }
        }

        Page{
            Text {

                text:"第二页"
            }
            Slider{
                from:0;
                to:100
                anchors.centerIn: parent
            }
        }
    }

    footer: TabBar {
        id: footertabBar
        currentIndex: sv.currentIndex
        TabButton {

            text: qsTr("footer Tab1");
        }
        TabButton {
            text: qsTr("footer Tab2")
        }
        TabButton {
            text: qsTr("footer Tab3")
        }
    }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值