目录

 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.0

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

BlueSquare.qml

import QtQuick 2.0

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

GreenSquare.qml

import QtQuick 2.0

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

3、定位器之Column（列）

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

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

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Column {
        id: column
        anchors.centerIn: parent
        spacing: 8
        RedSquare {}
        BlueSquare {}
        GreenSquare {}
    }
}

结果显示：

 4、定位器之Row（行）

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

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

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Row {
        id: row
        anchors.centerIn: parent
        spacing: 20
        BlueSquare {}
        RedSquare {}
        GreenSquare {}
    }
}

结果显示：

 5、定位器之Grid（栅格）

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

可以限制行数或者列数。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Grid {
        id: grid
        rows: 2
        columns: 3
        anchors.centerIn: parent
        spacing: 8
        RedSquare {}
        BlueSquare {}
        GreenSquare {}
        BlueSquare {}
        RedSquare {}
        GreenSquare {}
    }
}

结果展示：

 6、定位器之Flow（流）

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

能从头到底横向布局。

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

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

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Flow {
        anchors.centerIn: parent
        anchors.margins: 20
        spacing: 20
        RedSquare {}
        GreenSquare {}
        BlueSquare {}
    }
}

结果展示：

 7、重复元素Repeater

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

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    width: 600
    height: 400

    Grid {
        anchors.centerIn: parent
        anchors.margins: 8
        spacing: 4
        Repeater {
            model: 16
            Rectangle {
                width: 56; height: 56
                color: "blue"
                border.color: Qt.lighter(color)
                Text {
                    anchors.centerIn: parent
                    color: "green"
                    text: "Cell " + index
                }
            }
        }
    }
}

结果展示：