目录
一、工具栏TabBar、TabButton
import QtQuick 6.4
import QtQuick.Controls 6.4
Rectangle {
width: 720
height: 640
TabBar{
TabButton{text: "文件"}
TabButton{text: "编辑"}
TabButton{text: "视图"}
TabButton{text: "工具"}
}
}
二、多页面滑动容器 SwipeView
import QtQuick 6.4
import QtQuick.Controls 6.4
Rectangle {
width: 452
height: 638
SwipeView {
id: view
anchors.fill: parent
//第一页
Image {
id: firstPage
smooth: true
mipmap: true
antialiasing: true
fillMode: Image.PreserveAspectFit
sourceSize.height: height
source: "https://img1.doubanio.com/view/photo/l/public/p2717886028.webp"
}
//第二页
Rectangle{
id: secondPage
Rectangle{
width: parent.width
height: parent.height/2
color: 'red'
}
Rectangle{
y: parent.height/2
width: parent.width
height: parent.height/2
color: 'yellow'
}
}
//第三页
Item{
id: thirdPage
Button{
x:100
y:100
width:200
height:50
text:qsTr("OK")
}
}
//第四页
Image {
id:forthPage
smooth:true
mipmap:true
antialiasing:true
fillMode:Image.PreserveAspectFit
sourceSize.height: height
source:"https://img1.doubanio.com/view/photo/l/public/p2717883198.webp"
}
}
}
三、页面指示器PageIndicator
import QtQuick 6.4
import QtQuick.Controls 6.4
Rectangle {
width: 452
height: 638
PageIndicator {
id: indicator
//页数
count: 3
//当前页码
currentIndex: 0
}
}
四、综合示例
import QtQuick 6.4
import QtQuick.Controls 6.4
Rectangle {
width: 720
height: 640
//工具栏,点击或上下左右键切换
TabBar{
id:tabBar
TabButton{text: "文件"}
TabButton{text: "编辑"}
TabButton{text: "视图"}
TabButton{text: "工具"}
}
// 多页面容器,鼠标或手势滑动切换
SwipeView{
id:view
currentIndex: tabBar.currentIndex
anchors.fill: parent
//不要遮住工具栏
anchors.topMargin: 50
onCurrentIndexChanged: {
tabBar.currentIndex=view.currentIndex
indicator.currentIndex = currentIndex
}
//第一页
Image {
id: firstPage
smooth: true
mipmap: true
antialiasing: true
fillMode: Image.PreserveAspectFit
sourceSize.height: height
source: "https://img1.doubanio.com/view/photo/l/public/p2717886028.webp"
}
//第二页
Image {
id: secondPage
smooth: true
mipmap: true
antialiasing: true
fillMode: Image.PreserveAspectFit
sourceSize.height: height
source: "https://img1.doubanio.com/view/photo/l/public/p2717883198.webp"
}
//第三页
Image {
id: thirdPage
smooth: true
mipmap: true
antialiasing: true
fillMode: Image.PreserveAspectFit
sourceSize.height: height
source: "https://img2.doubanio.com/view/photo/l/public/p2873948072.webp"
}
//第三页
Image {
id: forthPage
smooth: true
mipmap: true
antialiasing: true
fillMode: Image.PreserveAspectFit
sourceSize.height: height
source: "https://img1.doubanio.com/view/photo/l/public/p2654487577.webp"
}
}
// 底部页面指示器
PageIndicator {
id: indicator
count: view.count
currentIndex: view.currentIndex
anchors.bottom: view.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}