源碼：https://github.com/sueRimn/QML-ExampleDemos
作者： 狐狸家的魚
Github： 八至
版權聲明：如需轉載請獲取授權和聯系作者
想實現垂直豎直方向的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
}
}
}