QML之Column垂直定位器_qml column

Column是qml中的一个定位器，自动垂直排列子项，所需要设置的属性相对比较少。

 Rectangle{

        anchors.fill: parent

        color: "black"

        Column{ //垂直布局子对象

            y:10

            spacing: 20  //相邻项的间隔

            anchors.horizontalCenter: parent.horizontalCenter

            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:"y";

                           duration: 1000

                       }

                   }

             //例子中当第二个的visible为false时，执行动画第三个矩形往上移动

             //反之，当第二个由不可见变可见的时候，第三个往下移动执行动画

             add:Transition { //增加子对象的时候执行的动画

                 NumberAnimation {

                     properties:"y";

                     duration: 1000

                 } //刚开始进入时慢慢从上往下滑，而不是一进入就显示

             }

        }

        MouseArea{

            anchors.fill: parent

            onClicked: {rec_2.visible = !rec_2.visible}

        }

    }