目录

 1、定位器

 2、定义组件

 3、定位器之Column（列）

 4、定位器之Row（行）

 5、定位器之Grid（栅格）

 6、定位器之Flow（流）

 7、重复元素Repeater

---

1、定位器

有一些QML元素被用于放置元素对象，它们被称作定位器。

提供了Row、Column、Grid、Flow用来作为定位器。

2、定义组件

RedSquare.qml

组件包含一个48*48的着色区域。

import QtQuick 2.0Rectangle {width: 48height: 48color: "red"border.color: Qt.lighter(color)
}

BlueSquare.qml

import QtQuick 2.0Rectangle {width: 48height: 48color: "blue"border.color: Qt.lighter(color)
}

GreenSquare.qml

import QtQuick 2.0Rectangle {width: 48height: 48color: "green"border.color: Qt.lighter(color)
}

3、定位器之Column（列）

Column（列）元素将它的子对象通过顶部对齐的列方式进行排列。

spacing属性：设置每个元素直接的间隔大小。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 600height: 400Column {id: columnanchors.centerIn: parentspacing: 8RedSquare {}BlueSquare {}GreenSquare {}}
}

结果显示：

 4、定位器之Row（行）

Row（行）：将它的子对象从左到右，或者从右到左依次排列，排列方式取决于layoutDirection属性。

spacing属性用来设置每个元素之间的间隔。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 600height: 400Row {id: rowanchors.centerIn: parentspacing: 20BlueSquare {}RedSquare {}GreenSquare {}}
}

结果显示：

 5、定位器之Grid（栅格）

Grid（栅格）：通过设置行数和列数，将子对象排列在一个栅格中。

可以限制行数或者列数。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 600height: 400Grid {id: gridrows: 2columns: 3anchors.centerIn: parentspacing: 8RedSquare {}BlueSquare {}GreenSquare {}BlueSquare {}RedSquare {}GreenSquare {}}
}

结果展示：

 6、定位器之Flow（流）

通过flow（流）属性和layoutDirection（布局方向）属性来控制流的方向。

能从头到底横向布局。

也可以从左到右或者从右到左。

作为加⼊流中的⼦对象， 它们在需要时可以被包装成新的⾏或者列。 为了让⼀个流可以⼯作， 必须指定⼀个宽度或者⾼度， 可以通过属性直接设定， 或者通过anchor（锚定） 布局设置。
main.qml

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 600height: 400Flow {anchors.centerIn: parentanchors.margins: 20spacing: 20RedSquare {}GreenSquare {}BlueSquare {}}
}

结果展示：

 7、重复元素Repeater

工作方式像for循环与迭代器的模式一样。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2Window {id: rootvisible: truewidth: 600height: 400Grid {anchors.centerIn: parentanchors.margins: 8spacing: 4Repeater {model: 16Rectangle {width: 56; height: 56color: "blue"border.color: Qt.lighter(color)Text {anchors.centerIn: parentcolor: "green"text: "Cell " + index}}}}
}

结果展示：