QML學習筆記（十）-TabView-豎直方向

源碼： https://github.com/sueRimn/QML-ExampleDemos

想實作垂直豎直方向的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      

}      

}      

}