使用TabView控件可以实现Tab切换效果,但想自定义该怎么设计呢,这里提供一个思路,利用属性tabIndex实现切换。
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Window {
id: root
width: 640
height: 480
visible: true
title: qsTr("Tab Test")
property int tabIndex: 1
Item {
width: 640
height: 480
anchors.fill: parent
Item {
id: items
anchors.top: parent.top
anchors.topMargin: 60
anchors.left: parent.left
anchors.leftMargin: 30
width: parent.width
height: 360
Item {
id: tabBtns
width: 150
anchors.left: parent.left
anchors.top: parent.top
ColumnLayout {
id: toolColumn
anchors.fill: parent
ToolButton {
id: btn1
text: qsTr("tab button 1")
checked: true
width: 100
height: 53
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
tabIndex = 1
btn1.checked = true
btn2.checked = false
btn3.checked = false
}
}
}
ToolButton {
id: btn2
text: qsTr("tab button 2")
width: 100
height: 53
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
tabIndex = 2
btn1.checked = false
btn2.checked = true
btn3.checked = false
}
}
}
ToolButton {
id: btn3
text: qsTr("tab button 3")
width: 100
height: 53
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
tabIndex = 3
btn1.checked = false
btn2.checked = false
btn3.checked = true
}
}
}
}
}
Item {
id: tab1
width: 450
height: 360
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 150
visible: tabIndex === 1
Rectangle {
id: rect1
anchors.fill: parent
color: "red"
}
}
Item {
id: tab2
width: 450
height: 360
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 150
visible: tabIndex === 2
Rectangle {
id: rect2
anchors.fill: parent
color: "green"
}
}
Item {
id: tab3
width: 450
height: 360
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 150
visible: tabIndex === 3
Rectangle {
id: rect3
anchors.fill: parent
color: "blue"
}
}
}
}
}