QML --> 定位器与Repeater(重复元素)
1、定位器Row
Row的就是行的意思,就是按从左到右方向排列。
2、定位器Column
Column(列)将它的子对象通过顶部对齐的方式进行排列。
3、定位器Grid
Grid(栅格)通过设置行数和列数将对象排列在一个栅格中,行数或列数可只设置一个,栅格元素会自动的计算子项目总数来获取配置。
4、定位器Flow
Flow(流),它有点向水一样。但是为了让流工作,必须指定一个宽度或高度,可以通过属性指定,或者通过anchor布局设置。
5、Repeater重复元素
通常与定位器一起使用。工作方式像for循环与迭代器模式一样。
例:
import QtQuick 2.0 Rectangle{ id:root; width: 252; height: 252; property variant colorArray: ["#00dbe3", "#67bde3", "#ea7025"]; Grid{ // Row、Column、Flow anchors.fill: parent; anchors.margins: 8; spacing: 4; // 间隔 Repeater{ model: 16; // 子项目个数 Rectangle{ width: 56; height: 56; property int colorIndex: Math.floor(Math.random()*3); // Math.floor(Math.random()*3)生成0~2的随机数 color: root.colorArray[colorIndex]; border.color: Qt.lighter(color); Text { anchors.centerIn: parent; color: "#f0f0f0"; text: "Cell " + index } } } } }