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}
}
}