QML之Flow流式布局

QML的定位器Flow是一个流式布局，可以说是一个另类的Grid布局，有点相似,Flow布局方式不需要设置属性行与列，只要设置是先布局行还是列，它就会根据子项和布局空间的大小先布局好一行或者时列。

Rectangle{

        anchors.centerIn: parent

        height: 200

        width: 300

        color: "gray"

        radius: 10

        Flow {  //自动排列子项，根据属性flow布局流，是先排满一行或者一列再进行第二行或者列

                //注意的是，当剩下的空间不足以放下下一个子项，就得另外开始一行或者列。

                 anchors.fill: parent

                 anchors.centerIn: parent

                 spacing: 10  //子项的间隔

                 //flow:Flow.LeftToRight//默认从左到右排列

                 //flow:Flow.TopToBottom //从上到下排列

                 move:Transition { //子项增加时或者减少时的过度，也就是子项的visible变化的过度

                      NumberAnimation {

                          properties:"x";

                          duration: 1000

                      }

                 }

                 Text { id:text1;text: "Text"; font.pixelSize: 40 ;color: "red"}

                 Text { id:text2;text: "items"; font.pixelSize: 40 ;color: "red"}

                 Text { id:text3;text: "flowing"; font.pixelSize: 40 ;color: "red"}

                 Text { id:text4;text: "inside"; font.pixelSize: 40 ;color: "red"}

                 Text { id:text5;text: "a"; font.pixelSize: 40 ;color: "red"}

                 Text { id:text6;text: "Flow"; font.pixelSize: 40 ;color: "red"}

                 Text { id:text7;text: "item"; font.pixelSize: 40 ;color: "red"}

                 MouseArea{

                     anchors.fill: parent

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

                 }

        }

    }