QML之Grid网格定位器_qml grid: grid contains more visible items (20) th

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*/;

            }

        }

    }