定义一个ApplicationWindow窗口,通过添加SwipeView和PageIndicator来实现页面切换效果和显示当前页面位置的指示器。
ApplicationWindow {id:rootvisible: truewidth: 340height: 480title: qsTr("SwipeView")
// 定义一个SwipeView用于页面切换效果
SwipeView{id: swipeview // 定义SwipeView的id为swipeview,用于后续引用currentIndex: 0 // 设置初始索引为0,即显示第一个页面anchors.fill: parent // 填充整个父容器,使SwipeView占满父元素的大小Home{} // 添加Home页面About{} // 添加About页面EditFile{} // 添加EditFile页面Profile{} // 添加Profile页面
}// 添加一个PageIndicator用于显示当前页面的位置指示器
PageIndicator{anchors.horizontalCenter: parent.horizontalCenter // 设置水平居中于父容器anchors.bottom: parent.bottom // 与父容器底部对齐currentIndex: swipeview.currentIndex // 与SwipeView中的currentIndex属性保持一致,以显示当前页面的位置count: swipeview.count // 与SwipeView中的count属性保持一致,以显示页面的总数
}
}
**SwipeView**是一个可滑动的容器,通过currentIndex属性控制当前显示的页面.
**PageIndicator**作为子组件,用于显示当前页面的位置指示器。currentIndex属性与swipeview.currentIndex属性保持一致,以确保指示器显示当前页面的位置。count属性与swipeview.count属性保持一致,以显示页面的总数。
在SwipeView中添加了四个页面:Home、About、EditFile和Profile,这些页面对应着具体的视图组件,可以根据需求进行自定义。