源码：https://github.com/sueRimn/QML-ExampleDemos
作者： 狐狸家的鱼
Github： 八至
版权声明：如需转载请获取授权和联系作者
想实现垂直竖直方向的TabView，查看文档，并没有对此的属性说明，跳出局限，自己做一个实例，录制软件没有录入鼠标
效果如下：
核心代码如下：
Column{
id:coloumn;
spacing: 0;
100;
height: 500;
Rectangle{
100;
height: 20;
color: "#ffc2fc"
Text{
id:cake
text: "蛋糕"
font.pointSize: 12;
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent;
onClicked: {
tabView.currentIndex = 0
}
}
}
Rectangle{
100;
height: 20;
color: "#ff557f"
Text{
id:hotPot
text: "火锅"
font.pointSize: 12;
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent;
onClicked: {
tabView.currentIndex = 1
}
}
}
Rectangle{
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
}
}
}