QML布局概述(Qt Quick Layouts Overview)

Qt Quick布局(Qt Quick Layouts)概述

Qt Quick Layouts是用於在用戶界面中排列Items的, 它們本身也是Items。 由於Qt Quick Layouts也可以調整其本身的大小，因此非常適合可調整大小的用戶界面.

首先

使用import語句將QML類型導入到您的應用程序中

import QtQuick.Layouts 1.11

關鍵點

關鍵點:

• 可以使用Layout.alignment屬性指定項目的對齊方式
• 可調整大小的Item可以使用Layout.fillWidth和Layout.fillHeight屬性指定
• 可以使用Layout.minimumWidth，Layout.preferredWidth和Layout.maximumWidth屬性指定尺寸限制（“width”可以替換為“height”，就指定的是height的限制）
• 可以使用spacing，rowSpacing或columnSpacing來指定間距

除上述功能外，GridLayout還添加了以下功能：

• 可以使用Layout.row和Layout.column屬性確定Grid坐標
• 自動Grid坐標和flow, rows, columns 參數一起使用
• 可以使用Layout.rowSpan(Item所占行數)和Layout.columnSpan(Item所占列數)屬性指定跨行或跨列的Item的跨度。

例子:

Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    RowLayout {
        anchors.fill: parent
        spacing: 6                  //布局中的所有Item之間的間距均為6像素
        Rectangle {
            color: "black"
            Layout.preferredWidth: 100  //建議寬度
            //Layout.preferredHeight: 150   //建議高度
            Layout.fillHeight: true         //占據為其分配的所有高度
        }
        Rectangle {
            color: "plum"
            Layout.fillWidth: true      //占據為其分配的所有寬度
            Layout.fillHeight: true     //占據為其分配的所有高度
        }
    }
}

注意: 布局負責分配其子Items的幾何形狀, 因此你不應指定子Items的width, height, x, y或其他任何可能影響布局的因素(如anchors等). 否則會產生沖突, 導致布局的結果具有不確定性. 如果子Item也是布局, 也同樣要遵循這個原理. 因此，只有沒有父布局的布局才能具有anchors.fill：parent.

大小控制

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'azure'
        Layout.fillWidth: true
        Layout.minimumWidth: 50         //最小寬度50
        Layout.preferredWidth: 100      //建議寬度100
        Layout.maximumWidth: 300        //最大寬度300
        Layout.minimumHeight: 150       //最小高度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
        }
    }
}

Loyout會組合每個Item的約束, 為布局元素提供最終的隱式約束. 如上述中子Item實際占用高寬如下表:

	最小值	建議值	最大值
隱式約束 (width)	156	306	∞
隱式約束 (height)	150	150	150

指定首選尺寸

當存在多個約束時, 它將按下表中的順序查詢這些候選屬性，並使用具有有效寬度或高度的第一個候選:

候選屬性	說明
Layout.preferredWidth 或 Layout.preferredHeight	如果默認的隱式大小未給出最佳設置，則應由應用程序修改這些屬性。
implicitWidth 或 implicitHeight	這些屬性應該由每個Item提供，以提供有意義的理想大小，例如，顯示Text類型的所有內容所需的大小。 隱式寬度或高度0會被解析為無效。
width 和 height	如果以上屬性均無效，則布局將會采納width和height屬性。

一個項目可以指定Layout.preferredWidth，而不必指定Layout.preferredHeight。 在這種情況下，有效的首選高度將由implicitHeight（或最終的height）確定。

注意: width或height屬性僅作為最終的備用。 如果要覆蓋首選大小，建議使用Layout.preferredWidth或Layout.preferredHeight。 依靠width或height屬性來指定首選大小可能會帶來一些意外的行為。 例如，更改width或height屬性不會觸發布局重新排列。 此外，當強制布局進行完全重建時，它可能會使用實際的寬度和高度，而不是QML文件中指定的寬度和高度。

連接windows和布局

你只可以通過錨定來設置Layout根據windows窗口大小來變化:

RowLayout {
    id: layout
    anchors.fill: parent

Layout的大小限制可用來限制其父元素window的大小。 你可以從Layout中獲取大小約束，並在Window元素的minimumWidth，minimumHeight，maximumWidth和maximumHeight上設置這些約束。 以下代碼確保了window的大小不能超出Layout的限制：

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

注意：由於在這個場景下layout.Layout.maximumWidth是無限的，因此我們不能將其綁定到Window的maximumWidth屬性。它需要綁定一個整數, 因此，我們將固定的最大寬度設置為1000。

最后，你通常希望窗口的初始大小為布局的隱式大小：

width: layout.implicitWidth
height: layout.implicitHeight

以上文章參考自Qt官方文檔: https://doc.qt.io/qt-5/qtquicklayouts-overview.html
依個人理解, 簡要翻譯, 如有錯漏, 歡迎指正.