QML布局管理—QML定位器和重复器

定位器是一个容器项，可以用来管理在声明式用户接口中项的位置和大小。定位器与标准Qt部件中的布局管理器很相似。当需要使用常规的布局来管理众多的项时可以使用定位器和重复器。

1.   定位器：Qt Quick图形元素集里提供了一组标准的定位器，分别是Column、Row、Grid和Flow。

a)    Column：用来垂直排列项目并且使它们不回重叠（需要设置宽度高度）。Spacing属性可以用来设置项目间间距。

import QtQuick 2.0

Column {
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 50 }
}
//Rectangle需要明确设置高度和宽度，否则重叠显示，如Rectangle中有Text元素，Text设置了高度，但Rectangle没有设置，则显示为重叠

b)    Row：用来水平排列项目并使它们不会重叠（需要设置宽度高度）。

import QtQuick 2.0

Row {
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 10 }
    Rectangle { color: "green"; width: 20; height: 20 }
    Rectangle { color: "blue"; width: 50; height: 30 }
}

c)    Grid：用来定义它的子项目，使它们排列在一个网格中而不会重叠。网格定位器会计算一个足够大的矩形单元网格来容纳所有的项目。向单元中放置项目，会从左向右、从上向下进行排列。一个Grid默认有4列，而可以有无限多的行来容纳所有的子项目。

--行数列数可以通过rows和columns属性来指定

--子项目间距spacing设置。

import QtQuick 2.0

Grid {
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 10 }
    Rectangle { color: "green"; width: 20; height: 20 }
    Rectangle { color: "blue"; width: 50; height: 30 }
    Rectangle { color: "cyan"; width: 50; height: 50 }
    Rectangle { color: "magenta"; width: 20; height: 10 }
    Rectangle { color: "black"; width: 20; height: 20 }
}

d)    Flow：用来将单词一样的项目放置在一个叶明上，通过换行使这些项目排列成多个行或列并且不会重叠。Flow项排列项目的规则与Grid项时相似的。

排列方式：flow属性，它是枚举类型，包含两个值，Flow.LeftToRight(默认—左右排列)和Flow.TopToBottom(上下排列)。

区别Grid：Flow中的项目当超出边界后会自动换行。

import QtQuick 2.0

Rectangle {
    color: "lightblue"
    width: 300; height: 200

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Text { text: "Text"; font.pixelSize: 40}
        Text { text: "items"; font.pixelSize: 40}
        Text { text: "flowing"; font.pixelSize: 40}
        Text { text: "inside"; font.pixelSize: 40}
        Text { text: "a"; font.pixelSize: 40}
        Text { text: "Flow"; font.pixelSize: 40}
        Text { text: "item"; font.pixelSize: 40}
    }
}

2.   重复器 Repeater

Repeater元素用来创建大量相似项目。

模型model：相似条目集合

委托delegate：将模型中的每一个条目分别实例化

Repeater通常会包含在定位器中以直观地对Repeater产生的众多委托项目进行布局。

import QtQuick 2.0

Grid {
    x: 5
    y: 5
    rows: 5; columns: 5; spacing: 10

    Repeater {
        model: 24
        Rectangle {
            width: 70; height: 70
            color: "lightgreen"
            Text {
                text: index
                font.pixelSize: 30
                anchors.centerIn: parent } }
    }
}

3.   使用切换

切换可以使在定位器中添加、移入或者删除项目时具有动画效果。4个定位器元素都有一个add和move属性，都需要分配一个Transition对象。

Add切换：应用在向定位器中创建一个项目以及将项目通过更换父对象而变为定位器的孩子时；

Move切换：应用在删除定位器中的一个项目以及通过更换父对象从而从定位器中移除对象时。

此外，将项目的透明度更改为0时会使用move切换使项目隐藏；当使项目的透明度为非0时，会使用add切换使项目显示。定位器切换只会影响项目的位置(x, y)。

import QtQuick 2.0

Flow {
    id: positiner

    move: Transition {
        NumberAnimation {
            properties: "x, y"
            easing: "easeOutBounce"
        }
    }
}