Qt Quick 定位器(Positioners)

定位器

定位器是一个容器，可以管理其子项目的布局。定位器包括Column，Row,Grid和Flow。如果他们的子项目不可见(visible为false)，宽度或者高度为0，那么该子项目不会显示，也不会被布局。定位器可以自动布局其子项目，也就是说，其子项目不再需要显示设置x,y等坐标或使用anchors锚进行布局。下面分别介绍Column, Row, Grid 和 Flow. 可在帮助中心通过Item Positioners关键字查看。

1. Column将其子项目排成一列

import QtQuick 2.2

Column {
    spacing: 2 //添加间距
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

2. Row将其子项目排成一行

import QtQuick 2.0

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

3.Grid将其子项目排列在一个网格中。Grid会计算一个足够大的矩形网格来容纳所有的子项目。向网格中添加项目，会按照从左向右，从上向下的顺序进行排列。每一个项目都会被放置在网格左上角上(0,0)的位置。一个Grid默认有4列，可以有无限多的行容纳所有子项目。行数和列数也可以通过rows和columns属性指定。另外，与Row类似，Grid也可以通过spacing属性设置子项目之间的间距，此时，水平方向和垂直方向会使用相同的间距。如果需要分别设置水平方向和垂直方向的间距，可以使用rowSpacing和columnSpacing属性。

import QtQuick 2.0

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

在Grid中可以使用horizontalItemAlignment和verticalItemAlignment分别设置子项目在水平方向和垂直方向的对其方式，其各自的可选值为：

• 水平方向: Grid.AlignLeft, Grid.AlignRight 和 Grid.AlignHCenter;
• 垂直方向: Grid.AlignTop, Grid.AlignBottom 和 Grid.AlignVCenter.

4. Flow

Flow项目可以从前向后，像流一样布局其子项目，如同单词放置在页面上一样，通过换行，使这些子项目排列成多行或列。Flow排列项目的规则与Grid相似，主要区别使，Flow的子项目会在超出边界后自动换行，每行的子项目数不一定相同。Flow有一个flow属性，包含两个值：Flow.LeftToRight(默认)和Flow.TopToBottom.前者是按照从上到下顺序排列子项目，直到超出Flow的高度，然后换到下一列。下面的例子显示了一个包含多个Text子项目的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 }
    }
}

5. 使用过渡(Transition)
   定位器添加或删除一个子项目时，可以使用一个过渡(Transition)使这些操作具有动画效果。4个定位器都有add，move和populate属性，它们需要分配一个Transiton对象。add过渡应用在定位器创建完毕后，向定位器中添加一个子项目，或者将子项目通过更换父对象方式从定位器中移除对象时；populate过渡应用在定位器第一次创建时，只会运行一次。此外，将项目的透明度更改为0时，会使用move过渡隐藏项目；当项目的透明度为非0时，会使用add过渡显示项目。定位器过渡只会影响项目的位置(x,y)

import QtQuick 2.2

Column {
    
    

    spacing: 2

    Rectangle {
    
     color: "red"; width: 50; height: 50 }
    Rectangle {
    
     id: greenRect; color: "green";
                    width: 20; height: 50 }

    Rectangle {
    
     color: "blue"; width: 50; height: 20 }

    move: Transition {
    
    
        NumberAnimation {
    
     properties: "x,y"; duration: 1000 }
    }

    focus: true
    Keys.onSpacePressed: greenRect.visible = ! greenRect.visible

}

当按下空格时，绿色矩形的visible值会被翻转。当它在显示与隐藏之间交换时，蓝色矩形会自动应用move过渡进行移动。

6. Positoner
   在Column，Row，Grid和Flow中会附加一个Positioner类型的对象作为顶层子项目，它可以为定位器中的子项目提供索引等信息。在下面的例子中，Grid通过Repeater创建了16个子矩形，每一个子矩形都使用Positioner.index显示了它在Grid中的索引，而第一i个矩形使用了不同颜色进行绘制。

import QtQuick 2.2

Grid {
    
    
    Repeater {
    
    
        model: 16
        Rectangle {
    
    
            id: rect
            width: 30; height: 30
            border.width: 1     //设置边宽
            color: Positioner.isFirstItem ? //isFirstItem第一项
                       "yellow" : "lightsteelblue"  //
            Text {
    
     text: rect.Positioner.index }    //设置矩形编号
        }
    }
}

7. Recpeater
   Repeater类型用来创建大量相似的项目。与其他视图类型一样，一个Repeater包含一个模型model属性和一个委托delegate属性。委托用来将模型中的每一个条目进行可视化显示。一个Rectangle通常会包含在一个定位器中，用于直观地对Repeater产生的众多委托项目进行布局。下面的例子中显示了一个Repeater和一个Grid结合使用，来排列一组Rectangle项目。

import QtQuick 2.0

Rectangle {
    
    
    width: 400; height: 240; color: "black"
    Grid {
    
    
        x: 5; y: 5
        rows: 5; columns: 5; spacing: 10
        Repeater {
    
    
            model: 12
            Rectangle {
    
    
                width: 70; height: 70; color: "lightgreen"
                Text {
    
    
                    text: index; font.pointSize: 30
                    anchors.centerIn: parent
                }
            }
        }
    }
}

这里使用了一个矩形作为委托，在其中通过index索引属性显示了每个子项目的编号。在Recpeater中创建的项目数量可以通过count属性获得，该属性是只读的。