QtQuick 布局管理—定位器

QtQuick 布局

QtQuick 提供了许多布局方式。

1. 使用x，y属性来为其提供一个具体的坐标。
   • 适用于静态的用户界面。
2. 通过属性绑定来设置其位置或者大小。
   • 适用于静态的用户界面。
3. 基于锚的布局
   • 适用于静态的用户界面。
4. 定位器
   • 用来进行常规布局。
5. 布局管理器
   • 适用于需要同时管理项目的位置和大小、可调整大小的用户界面。

一、 定位器

定位器（Positioners）是一个容器，可以管理其中子项目的布局，包括Column、Row、Grid、Flow。

如果他们的子项目不可见（visible为false）、宽度或者高度为0，那么改子项目不会显示也不会被布局。

定位器可以自动布局其子项目，其子项目不需要显式设置x、y等坐标或者使用anchors锚进行布局。

1. Column

Column将子项目排成一列。

属性：

1. padding
   • 设置Column子项目和边界之间的距离。
2. topPadding, bottomPadding, leftPadding, rightPadding

import QtQuick


Column{
    spacing: 2
    padding: 5
    Rectangle{
        color: "white"
        border.width: 1
        width: 50
        height: 50
    }
    
    Rectangle{
        color: "green"
        width: 20
        height: 50
    }
    
    Rectangle{
        color: "lightgrey"
        width: 50
        height: 20
    }
}

2. Row

Row将子项目排成一行。

Row{
    spacing: 2
    padding: 5
    
    Rectangle{ color: "white"; border.width: 1; width: 50; height: 50 }
    Rectangle{ color: "green"; width: 20; height: 50 }
    Rectangle{ color: "lightgrey"; width: 50; height: 20 }
}

3. Grid

Grid将子项目排列在一个网格中。
Grid会积算一个足够大的矩形网格来容纳所有的子项目。

向网格中添加的项目会按照从左向右、从上向下的顺序进行排列。每一个项目都会被放置在网格左上角（0, 0）的位置。

一个Grid默认有4列。
‘属性：’

1. rows
   • 指定行数
2. columns
   • 指定列数
3. spacing, rowSpacing, columnSpacing
   • 子项目之间的间距

import QtQuick

Grid {
    columns: 3
    spacing: 2
    padding: 5

    Rectangle {
        color: "white"
        border.width: 1
        width: 50
        height: 50
    }

    Rectangle {
        color: "green"
        width: 20
        height: 50
    }

    Rectangle {
        color: "lightgrey"
        width: 50
        height: 20
    }

    Rectangle {
        color: "cyan"
        width: 50
        height: 50
    }

    Rectangle {
        color: "magenta"
        width: 10
        height: 10
    }
}

4. Flow

Flow项目可以从前向后，像流一样布局其子项目。

Flow子项目会在超出边界后自动换行。

属性：

1. flow
   • Flow.LeftToRight （默认）
   • Flow.TopToBottom

import QtQuick

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来使这些操作具有动画效果。

定位器都有add、move、polulate属性，需要分配一个Transition对象。

1. add过渡
   • 应用在定位器创建完毕后；
   • 向定位器中添加一个子项目；
   • 子项目通过更换父对象的方式变为定位器的孩子时；
   • 将项目透明度设为非0时。
2. move过渡
   • 删除定位器中的一个子项目时；
   • 通过更换父对象的方式从定位器中移除对象时；
   • 将项目的透明度更改为0时；
3. populate过渡
   • 定位器第一次创建时，且只会运行一次；

定位器过渡只会影响项目的位置（x，y）

例子（延时move过渡）：

import QtQuick

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

Column、Row、Grid和Flow中会附加一个Positioner类型的对象作为顶层子项目，它可以作为定位器中的子项目提供索引等信息。

例子（Grid通过Repeater创建16个矩形，每个矩形都使用Positioner.index显示了它早Grid中的索引，而第一个矩形使用了不同颜色进行绘制）：

import QtQuick

Grid {
    padding: 5
    Repeater {
        model: 16

        Rectangle {
            id: rect
            width: 40
            height: 40
            border.width: 1
            color: Positioner.isFirstItem ? "yellow" : "lightsteelblue"
            
            Text{ text: rect.Positioner.index; anchors.centerIn: parent }
        }
    }
}

7. Repeater

Repeater类型用来创建大量相似的项目。
与其他视图类型一样，一个Repeater包含一个模型model和一个委托delegate属性。

委托用来将模型中的每一个条目进行可视化显示。
一个Repeater通常会包含在一个定位器中，用于直观地对Repeater产生的众多委托项目进行布局。

例子（显示一个Repeater和一个Grid结合使用，从而排列一组Rectangle）：

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索引属性显示了每个子项目的编号。

在Repeater中创建的项目数量可以通过count属性获得，该属性是只读的。