Qt 5.12--佈局元素（Layout Items）

1 簡介

Qml裏面佈局主要有Row,、Column、Grid，以及使用Anchor進行佈局

Row
QML 中的 Row 元素會將其子控件都排列在同一行，相互不重疊。我們還可以使用它的spacing 屬性來定義子控件之間的距離。
Column
QML 中的 Column元素會將其子控件都排列在同一行，相互不重疊。我們還可以使用它的spacing 屬性來定義子控件之間的距離。
Grid佈局
Grid佈局有GridLayout、ColumnLayout、RowLayout、Column、Row，其中ColumnLayout、RowLayout只是GridLayout的一種特例，ColumnLayout表示只有一列，RowLayout表示只有一行。
GridLayout使用columns、rows屬性將空間分成若干單元格，使用columnSpacing、rowSpacing確立單元格之間的間隔。而GridLayout內部元素的大小由Layout.fillWidth、Layout.fillHeight以及Layout.preferredWidth、Layout.preferredHeight來確定，如Layout.fillWidth:true表示寬度填充整個單元格，Layout.preferredWidth則指定一個建議寬度。Layout.row、Layout.column確定內部元素處於哪個單元格。注意，不要將內部元素的寬度、高度、x、y與GridLayout進行綁定，容易導致綁定循環。
Column、Row類似於html中的float或是wpf中的StackPanel，會直接將元素一個個挨在一起，元素間的間隔使用spacing控制
Anchor錨點佈局
錨點允許我們靈活地設置兩個元素的相對位置。它使兩個元素之間形成一種類似於錨的關係，也就是兩個元素之間形成一個固定點。錨點的行爲類似於一種鏈接，它要比單純地計算座標改變更強。由於錨點描述的是相對位置，所以在使用錨點時，我們必須指定兩個元素，聲明其中一個元素相對於另外一個元素。錨點是Item元素的基本屬性之一，因而適用於所有 QML 可視元素。

2 Row佈局

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 Column佈局

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

4 Grid佈局

QML 中的 Grid元素會將其子控件都均勻地排列在一個網格內，相互不重疊，每一個子控件都被放置在一個網格單元的（0，0）位置，也就是左上角。Grid的rows 和columns屬性定義網格的行數和列數，列數默認是4。我們還可以使用Grid的spacing 屬性來定義網格單元之間的距離，這裏注意水平和垂直方向的spacing都是一樣的。

GridLayout佈局的一個示例

import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1

Window {
    id:gridLayoutWindow;
    title:"GridLayoutWindow";
    width: 480;
    height: 320;
    GridLayout{
        id: gridLayout1
        columns: 2;
        rows:2;
        anchors.fill: parent;
        anchors.margins: 5;
        columnSpacing: 0;
        rowSpacing: 0;

        Rectangle{
            id:rect00;
            color: "red";
            Layout.fillWidth: true;
            Layout.fillHeight: true;
        }

        Rectangle{
            id:rect01;
            color: "blue";
            Layout.fillWidth: true;
            Layout.fillHeight: true;
        }

        Rectangle{
            id:rect10;
            color: "green";
            Layout.fillWidth: true;
            Layout.fillHeight: true;
            Layout.row:1;
            Layout.column: 1;
        }

    }
}

SplitView佈局示例

import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2

Window {
    width: 480;
    height: 320;
    title: "SplitView";

    SplitView{
        anchors.fill:parent;
        orientation: Qt.Horizontal;
        Rectangle{
            id:rect1;
            width:100;
            color:"red";
        }
        Rectangle{
            id:rect2;
            Layout.fillWidth: true;
            Layout.minimumWidth: 50;
            color:"blue";
        }
        Rectangle{
            id:rect3;
            width:100;
            color:"green";
        }
    }
}

5 錨點佈局

一個元素有6條錨定線（top頂，bottom底，left左，right右，horizontalCenter水平中，verticalCenter垂直中）。在文本元素（Text Element）中有一條文本的錨定基線（baseline）。每一條錨定線都有一個偏移（offset）值，在top（頂），bottom（底），left（左），right（右）的錨定線中它們也被稱作邊距。對於horizontalCenter（水平中）與verticalCenter（垂直中）與baseline（文本基線）中被稱作偏移值。

6 混合應用

Column {
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }

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