QML---定位器与布局管理器

当我们在进行界面布局的时候，会觉得布局非常麻烦，到处使用锚点，并且不管是阅读还是维护起来都特别的麻烦。所以当布局的地方非常工整时，就可以使用定位器或者布局管理器去进行布局，这样就可以不用管麻烦的锚点了。

定位器和布局器这里都用网格（grid）进行举例，这两个类型在我看来可以说是大同小异，作用和使用方法也可以说是80%的相似，只有一些细节方面不同。所以想用哪个就看自己用哪种顺手吧，或者利用他们的细节去完成需求也是可以的。

Grid 定位器

定位器是不会改变它所管理的元素的大小，即便用户调整了界面的尺寸，它也不会去修改它孩子的属性。

而Grid定位器会创建一个拥有很多单元格的网格（能够容纳所以子类），然后Grid会把子类一个一个放进网格当中，默认从左往右，从上往下去排列。

它的行数和列数不进行指定的话就默认是4列，行数根据子类数量去进行计算

直接看个例子再来讲解属性吧

Grid{
        columns: 1
        rowSpacing: 5
        columnSpacing: 5
        flow:Grid.LeftToRight
        Repeater{
            id:id_repeater
            model: [true,false,true]
            Rectangle{
                color: "red"
                width: 120
                height: 40
                visible: modelData
                border.color: "blue"
                border.width: 1
            }
        }
    }

例子中将Grid设置为只有一列，然后用来存放Repeater出来的对象

rowSpacing：行间距，也就是每一行之间的距离

columSpacing：列间距，解释同上

flow：指定排列方式，这里设置为从左往右（默认就是从左往右）

使用就这么简单，但是里面有些细节，那就是如果子类对象的visible属性为false，那么定位器就不会将这个子类放进网格当中去

看看上述 的示例代码，我们执行程序，它的界面效果如图

 按理来说，第二个item放进定位器时因为visible设置为了false，所以会留一块白在中间，但是结果并没有留白，说明Item的属性如果为false时就不会放进网格内部

但是如果在程序执行中修改了item的visible，那么它会重新将item按照顺序放入网格当中

布局管理器 GridLayout

布局管理器和定位器大同小异，但是它会修改子类控件的大小，让它自适应大小，其它的column和row之类的属性用法和定位器一致，下面就是一个简单的例子

GridLayout{
        anchors.fill: parent
        columns: 1
        rowSpacing: 5
        columnSpacing: 5
        flow:Grid.LeftToRight
        Repeater{
            id:id_repeater
            model: [true,false,true]
            Rectangle{
                color: "red"
                Layout.preferredHeight: 40
                Layout.preferredWidth: 120
                visible: modelData
                border.color: "blue"
                border.width: 1
            }
        }
    }

一般不让布局器修改大小就可以设置

Layout.preferredHeight: 40
 Layout.preferredWidth: 120

这样就会固定大小了