QML之Row水平定位器

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}

        }

    }