Qt5与QML（五）

1.4.5 定位元素

还有一些元素是给别的物体提供定位的功能，这些被称作定位器的元素包括Row（行）Column（列），Grid（网格），Flow（流程），他们可以表示相类似的元素放到一起，下面是一个例子。

你可以注意到，我的边框颜色使用到了Qt.loghter(color)，他是将底色高亮转化后设置成边框的颜色。我们将利用到这些技巧，是我们的程序更紧凑，更具有可读性。记住上面的每一个长方体都是初始化为48x48px的。

Column元素将每一个子元件按照列的布局方式，一个接着一个的排列。属性spacing可以设置他们每一个元件之间的距离。

元素Row将他的子元件按照行的形式排列，可以是从左到右，也可以是从右到左，这个由属性layoutDirection决定，同样的，也是使用属性spacing来设置他们之间的间隔。

元素Grid将他的子元素通过网格排布，可以通过设置rows和columns属性来改变没一行或者一列的数量，不过每一次只能设置一个属性，另外一个属性会被自动的计算出来，比如你总共6个方格，设置行数为3行，那么没一行的方格只能为2个。属性flow和layoutDirection用来控制新加入到网格布局中的元素的位置。spacing用来设置每个方格之间的距离。

最后一个定位元素是Flow，他是流动的添加元素，他的添加顺序是由flow和layoutDirection来决定的，只要他可以从左到右的添加，也可以从右到左的添加，也可以上下添加。如果需要，他会自动创建新的行或者列，为了能让它工作起来，需要给Flow设置一个宽和高，当然，你也可以设置Flow的方向和锚点布局。

一个经常和定位元素一起使用的元素是Repeater，他的工作有点类似与for或者其他的循环迭代的那些工作模式，在最简单的情况下，就是提供一个循环变量，让你进行循环。

在这个repeater例子中，我们使用到了一些新的技术，我们定义了一个自己的颜色数组，repeater创建了一个4x4的的长方体组合，通过JS的数学函数Math.floor(Math.random()*3)计算得到他的颜色下标，他是介于0到2之间，这些JS函数都是属于QtQuick的一部分，集成到了标准库之中了。一个repeater接受一个index的输入，他代表的是当前循环运行到了第几个，我们利用这个数字来标识当前的方格。