QML之Grid網格定位器

Grid是QML的一個網格定位器，自動排列定位它的子項，當然，我們需要對她的屬性進行設置。

 Grid{ //網格定位器

        rows : 2 //設置網格的行數，

        columns: 5 //設置網格列數

        //如果不進行行列數設置，會根據子項的多少自動設置，（我記得是行列數最相近原則）

        spacing: 10 //子項之間的距離

        y:10

        z:1

        anchors.horizontalCenter: parent.horizontalCenter

        flow: Grid.LeftToRight //子項的排列方式，從左往右，意思就是先排一行，再排第二行

        //flow: Grid.TopToBottom //從上到下排列

        add:Transition {  //加載時候的過度方式，不設置這屬性的話，一進入該界面可看到佈局

            NumberAnimation {

                properties:"x";

                duration: 1000

            } //剛開始進入時慢慢從左往右滑，而不是一進入就顯示（執行動畫效果）

        }

        move:Transition {  //子項由可見與不可見之間切換執行的過度

            NumberAnimation {

                properties:"x";

                duration: 1000

            } //當子項的visible發生變化執行的動畫

        }

        Repeater {//重複器，這裏就不做具體介紹，當然我們也可以使用多個子項佈局，效果一樣

            model :10

            Button{

                label: "test_" + (index +1)

                onButtonClick: visible=false/*testvisble = index+1*/;

            }

        }

    }