QML 元素布局

一、概述

QML中有两套与布局有关的类库，一套叫做定位器，一套叫做布局。
定位器包括Row(行定位器)、Column(列定位器)、Grid(表格定位器)、Flow(流式定位器)。
布局管理器有RowLayout(行布局)、ColumnLayout(列布局)、GridLayoout(表格布局)。

二、定位器

定位器是一种容器元素，专门管理界面中的其他元素，与传统的QtWidget中的布局管理器类似。使用定位器，你可以很方便得把众多的元素组织在一起，形成非常规则的界面效果。注意，定位器不会改变元素的大小，即使用户调整界面，也不会干涉孩子的尺寸。

Row

沿着一行安置孩子们，当你需要在水平设置一系列Item时，可以使用行定位器。
示例代码如下：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 300
    height: 200
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        anchors.margins: 10
        color: "#EEEEEF"
        border.color: "blue"
        Row{
            anchors.verticalCenter: parent.verticalCenter
            spacing: 6
            Button{
                text: "button1"
                width: 60
            }
            Button{
                text: "button2"
                width: 100
            }
            Button{
                text: "button3"
                width: 60
            }
            Button{
                text: "button3"
                width: 100
            }
        }
    }
}

由此可见，行定位器单单把元素组织在一起，并不会根据界面大小，自动调节孩子们的尺寸。

Column

Column和Row类似，不过是在垂直方向上安排它的子项。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 300
    height: 200
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        anchors.margins: 10
        color: "#EEEEEF"
        border.color: "blue"
        Column{
            anchors.verticalCenter: parent.verticalCenter
            spacing: 6
            Button{
                text: "button1"
                width: 60
            }
            Button{
                text: "button2"
                width: 100
            }
            Button{
                text: "button3"
                width: 60
            }
            Button{
                text: "button3"
                width: 100
            }
        }
    }
}

Grid

Grid是在一个网格上放置它的子项。它会创建一个拥有多个单元格的网格，足够容纳所有的子项，Grid会从左到右，从上到下把Item一个个塞到单元格里，Item默认会被放到单元格左上角，即（0,0）的位置。

rows、columns来设置表格的行数和列数，默认是4列，行数自动计算。
rowSpacing、columnSpacing指定行列间距；

更多属性的设置可以查看Qt官方文档！

Flow

Flow和Grid类似，不同之处是，Flow没有显式的行数、列数，它会计算Item的尺寸，然后与自身的尺寸比较，按需折行。Flow的flow属性，默认取值是Flow.leftToRight,从左至右安排Item,直到Flow本身的宽度不能容乃新的子Item时，折行。当flow取Flow.ToptoBotton时，从上到下安排Item,直到Flow本身的高度不能容纳新的Item时，开始在下一列上安排Item.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 300
    height: 200
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        anchors.margins: 10
        color: "#EEEEEF"
        border.color: "blue"
        Flow{
            anchors.fill: parent
            anchors.margins: 10
            spacing: 6
            Button{
                text: "button1"
                width: 60
            }
            Button{
                text: "button2"
                width: 100
            }
            Button{
                text: "button3"
                width: 60
            }
            Button{
                text: "button3"
                width: 100
            }
        }
    }
}

三、布局管理器

QML 中的布局管理器和QWidget中国的相似，与定位器不同的是，布局管理器会自动调整子Item的尺寸来适应界面大小的变化。
使用布局管理器需要导入Layout模块
import QtQuick.Layouts 1.1

RowLayout

行布局可以看作只有一行的GridLayout,它与Row的行为类似，不同之处在于，RowLayout所管理的元素可以使用下列附加属性

ColumnLayout

列布局可以看作只有一列的GridLayout,它的行为与Column类似，不同之处在于，它所管理的元素可以有下列附加属性：

Layout.minimumHeight: 40 //最小高度
Layout.minimumWidth:60 //最小宽度
Layout.preferredWidth:80 //首选宽度 默认-1，为-1时忽略该值
Layout.preferredHeight:80 //首选高度 默认-1，为-1时忽略该值
Layout.maximumHeight:50 //最大高度
Layout.maximumWidth:100 //最大宽度
Layout.fillWidth:true //true:尽可能宽 false:固定宽度设为首选宽度 默认为true
Layout.fillHeight:true //true:尽可能高 false:固定宽度设为首选高度 默认为true
Layout.alignment:

GridLayout

GridLayout与QWidget中的QGridLayout功能类似，它在一个表格中安排它管理的Item,如果用户调整界面尺寸，GridLayout会自动调整Item的位置。
GridLayout管理的Item，可以使用下列附加属性：

Layout.row: 0 //行号
Layout.column: 0 //列号
Layout.rowSpan: 1 //所占行数
Layout.columnSpan: 1 //所占列数
Layout.minimumHeight: 40 //最小高度
Layout.minimumWidth:60 //最小宽度
Layout.preferredWidth:80 //首选宽度 默认-1，为-1时忽略该值
Layout.preferredHeight:80 //首选高度 默认-1，为-1时忽略该值
Layout.maximumHeight:50 //最大高度
Layout.maximumWidth:100 //最大宽度
Layout.fillWidth:true //true:尽可能宽 false:固定宽度设为首选宽度 默认为true
Layout.fillHeight:true //true:尽可能高 false:固定宽度设为首选高度 默认为true

四、其他布局方式

Qt Quick中的Item都有x、y、width、height属性，其实可以使用他们来定位Item,就是我们常用的绝对坐标布局。