一、效果展示

带上main.qml，一共4个page。第4个page上面有一个按钮，点击则会直接返回的到首页，也就是第1个page。

 

二、main.qml中的代码 

import QtQuick
import QtQuick.Controls //若要使用控件，则导入该包ApplicationWindow { // Window -> ApplicationWindowid: wdwidth: 640height: 480visible: truetitle: qsTr("左右滑动的控件：SwipeView演示")SwipeView{ //左右滑动的控件id: swipeViewanchors.fill: parentHome{} //首页About{} //第2个页面EditProfile{} //第3个页面Profile{} //第4个页面，上面带个“返回首页”的按钮}PageIndicator{anchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenter //把这个圆点放在窗口底部中间位置currentIndex: swipeView.currentIndex //绑定当前索引count: swipeView.count //圆点的数量和滑动页面的数量保持一致}
}

三、返回到首页是怎么实现的？

先看第4个page的代码：

import QtQuick
import QtQuick.ControlsPage { // 容器控件，可以方便地将页眉和页脚项添加到页面中title: "Profile"Column {spacing: 10anchors.centerIn: parentLabel {anchors.horizontalCenter: parent.horizontalCentertext: "第4个页面"}Button {text: "返回首页"onClicked: swipeView.setCurrentIndex(0) //索引设置为0，则会回到初始页面anchors.horizontalCenter: parent.horizontalCenter}}
}

 在按钮的 onClicked 属性中，我们将page的索引设为0，也就是第1个页面即可。

四、页面底部的4个圆点怎么弄的？

这里是用到的一个qml中的类：PageIndicator。具体使用方法，可以去qml的帮助文档里看一下，这里就不赘述了。

五、结语

如果对你有帮助，可以点点关注哈，随手点个赞也行哦~感谢感谢！