想实现垂直竖直方向的TabView,查看文档,并没有对此的属性说明,所以跳出局限,自己做一个实例,录制软件没有录入鼠标
效果如下:
核心代码如下:
Column{
id:coloumn;
spacing: 0;
width: 100;
height: 500;
Rectangle{
width: 100;
height: 20;
color: "#ffc2fc"
Text{
id:cake
text: "蛋糕"
font.pointSize: 12;
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent;
onClicked: {
tabView.currentIndex = 0
}
}
}
Rectangle{
width: 100;
height: 20;
color: "#ff557f"
Text{
id:hotPot
text: "火锅"
font.pointSize: 12;
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent;
onClicked: {
tabView.currentIndex = 1
}
}
}
Rectangle{
width: 100;
height: 20;
color: "#fff66f"
Text{
id:puff
text: "泡芙"
font.pointSize: 12;
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent;
onClicked: {
tabView.currentIndex = 2;
}
}
}
}
TabView{
id:tabView;
anchors.left: coloumn.right;
anchors.top:coloumn.top
height: coloumn.height
tabsVisible: false
tabPosition: Qt.leftEdge
Tab{
Rectangle{
anchors.fill: parent;
color: "#ffc2fc"
Text{
text: "今天吃蛋糕"
color:"#333"
font.pointSize: 14
anchors.centerIn: parent
}
}
}
Tab{
Rectangle{
anchors.fill: parent;
color: "#ff557f"
Text{
text: "今天吃火锅"
color:"#333"
font.pointSize: 14
anchors.centerIn: parent
}
}
}
Tab{
Rectangle{
anchors.fill: parent;
color: "#fff66f"
Text{
text: "今天吃泡芙"
color:"#333"
font.pointSize: 14
anchors.centerIn: parent
}
}
}