QML官方教程——Qt Quick Layouts Overview

附網址：http://qt-project.org/doc/qt-5/qtquicklayouts-overview.html

Qt Quick Layouts Overview —— Qt Quick Layouts概述

Qt Quick Layouts是用來對用戶界面中的組件進行布局的一套組件。由於Qt Quick Layouts會根據實際情況動態調整其內部組件的尺寸，因此它非常適合被用在尺寸可變的用戶界面中。

Getting Started

在.qml文件裡使用如下聲明將其引入到你的應用程序中。

import QtQuick.Layouts 1.1

Key features —— 關鍵特征值

部分關鍵特征值如下：

· 項目的Alignment可以由Layout.alignment屬性指定。

· Resizable items（尺寸可變的項目）可以由Layout.fillWidth和Layout.fillHeight屬性指定。

· Size constraints（尺寸限制）可以由Layout.minimumWidth，Layout.preferredWidth，以及Layout.maximumWidth屬性指定。（當然，“Height”也是一樣）。

· Spacings（間隔）可以由spacing，rowSpacing或columnSpacing指定。

除了上面這些，GridLayout還添加了這些特征值：

· Grid coordinates可以由Layout.row和Layout.column指定。

· Automatic grid coordinates與flow，rows，columns屬性共同工作。

· Spans為行列的跨度，可以由Layout.rowSpan和Layout.columnSpan屬性指定。

Size Constraints —— 尺寸限制

由於一個對象的布局可以調整它的尺寸，因此當Layout.fillWidth或者Layout.fillHeight被設置為真時，layout需要知道所有組件的minimum，preferred和maximum尺寸。例如下面的代碼展示了在一個布局中，兩個水平方向相鄰的矩形。

蔚藍色的矩形的尺寸可以由50x150變化到300x150，而紫紅色矩形的尺寸可以由100x100變化到 無窮x100。

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'azure'
        Layout.fillWidth: true
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
    Rectangle {
        color: 'plum'
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        Layout.preferredWidth: 200
        Layout.preferredHeight: 100
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
}

結合各項目的約束，我們就能得到這個layout元素的隱式約束。<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+Cjx0YWJsZSBib3JkZXI9"1" width="400" cellspacing="1" cellpadding="1"> 最小 優先 最大 隱式限制（寬度） 156 306 無窮(Number.POSITIVE_INFINITY) 隱式限制（高度） 150 150 150

因此這個布局不會窄於156或者高於、低於150，來保證它不會打破其任何子部件的約束。

Specifying Preferred Size —— 指定優先尺寸

對於每個項目，有效的優先尺寸可能由多個候選屬性決定。為了決定有效的首選尺寸，layout將按順序查詢下列候選尺寸，並挑選第一個寬高有效的候選者。

候選屬性 描述 Layout.preferredWidth 或 Layout.preferredHeight 如果默認的隱式尺寸沒有給出最佳的安排，
程序應該修改這兩個屬性值。 implicitWidth 或 implicitHeight 該屬性是由其內部組件所決定的一個理想的數值，
例如一個這個尺寸需要顯示Text的所有內容。
如果隱式的寬度和高度為0 則被認為是無效的。 width 和 height 如果上面屬性的值都無效，
layout再來求助於width 和 height屬性。

一個組件可以在指明Layout.preferredWidth的同時而不指明Layout.preferredHeight。在這種情況下，有效的首選高度將由implicitHeight（或者是最終的height）來決定。

注：修改width或者height的屬性值僅僅提供了一個最終的決定量，如果你想要重寫優先尺寸，建議是使用Layout.preferredWidth或者Layout.preferredHeight。依賴width或者height屬性值來指定首選尺寸可能會造成不可預料的行為。例如，改變width和height的值並不能引起布局的重排。並且當布局被使用來進行一次完整重建時，它可能使用實際的寬度和高度，而不是QML文件中定義的width和height值。

Connecting windows and layouts —— 連接窗口和布局

你可以使用錨的方式來使這個布局可以跟隨窗口尺寸的改變。

RowLayout {
    id: layout
    anchors.fill: parent

布局的尺寸約束可以被用來保證窗口的尺寸變化不會超出布局尺寸約束。你可以通過使用窗口元素的minimumWidth，minimumHeight，maximumWidth，以及maximumHeight來修改這些約束。下面的代碼保證了窗口尺寸的調整不會超過這個布局的限制。

minimumWidth: layout.Layout.minimumWidth
minimumHeight: layout.Layout.minimumHeight
maximumWidth: 1000
maximumHeight: layout.Layout.maximumHeight

注：由於這個例子中layout.Layout.maximumWidth是無窮大的，我們不能將其與窗口的maximumWidth屬性進行綁定，因此我們將最大寬度設置為一個固定的整數1000。

最後，你通常希望窗口的初始大小與布局的隱式尺寸一致：

width: layout.implicitWidth
height: layout.implicitHeight