QML側邊伸縮導航欄

import QtQuick 2.0      

Rectangle {      

id: root      

width: 100; height: 400;      

color: "white"      

Rectangle      

{      

id: hideButton      

anchors { top: parent.top; bottom:parent.bottom; left:parent.left; }      

width: 10      

border.width: 0;      

color: "lightblue"      

Text {      

id: hideButtonLabel      

anchors.centerIn: parent;      

text: "<"      

}      

MouseArea {      

anchors.fill: parent;      

onClicked: {      

if(root.state == '') {      

root.state = "minSize"      

} else {      

root.state = ''      

}      

}      

}      

}      

ListModel {      

id: featureButtonsModel      

ListElement {      

name: "圖檔"      

}      

ListElement {      

name: "視訊"      

}      

ListElement {      

name: "音樂"      

}      

}      

Component {      

id:featureButtonsDelegate      

Rectangle      

{      

id:wrapper;      

width: wrapper.ListView.view.width;      

height: Math.max(wrapper.ListView.view.height/wrapper.ListView.view.model.count,40);      

color: "lightblue";      

border.width: 0;      

Text {      

anchors.centerIn: parent;      

text: model.name;      

}      

}      

}      

ListView      

{      

id:featureButtons      

spacing: 2;      

anchors { top:parent.top; /*right:parent.right;*/ bottom:parent.bottom; left:hideButton.right; }      

width: root.width - hideButton.width;      

clip: true      

model: featureButtonsModel      

delegate:featureButtonsDelegate      

}      

states: [      

State {      

name: "minSize"      

PropertyChanges {      

target: hideButtonLabel      

text: ">"      

}      

PropertyChanges {      

target: root      

width: 10;      

}      

}      

]      

transitions: [      

Transition {      

NumberAnimation { target: root; property: "width"; duration: 200; easing.type: Easing.InOutQuad }      

}      

]      

}      

隻實作了動畫效果,點選發送點選事件還未做.

伸展與收縮時有個過渡的動畫

伸展時:

縮進時: