Row爲QML中一個水平自動佈局定位器,需要設置的屬性不多。下面詳細說明。
Rectangle{
anchors.fill: parent
color: "black"
Row{ //水平佈局子對象
y:10
spacing: 20 //相鄰項的間隔
anchors.centerIn: parent
Rectangle{
id:rec_1
height: 100
width: 100
radius: 5
color: "red"
}
Rectangle{
id:rec_2
height: 100
width: 100
radius: 5
color: "blue"
}
Rectangle{
id:rec_3
height: 100
width: 100
radius: 5
color: "yellow"
}
move: Transition { //移除過度
NumberAnimation {
properties:"x";
duration: 1000
}
}
//例子中當第二個的visible爲false時,執行動畫第三個矩形往左移動到第二個矩形的位置
//反之,當第二個由不可見變可見的時候,第三個往右移動回來原來的位置
add:Transition { //增加子對象的時候執行的動畫
NumberAnimation {
properties:"x";
duration: 1000
} //剛開始進入時慢慢從左往右滑,而不是一進入就顯示
}
//layoutDirection: Qt.LeftToRight //本人qt版本沒有這個屬性,這個屬性表示子項從左往右佈局
//layoutDirection: Qt.RightToLeft //從右往左佈局
}
MouseArea{
anchors.fill: parent
onClicked: {rec_2.visible = !rec_2.visible}
}
}