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}

                 }

        }

    }