Qt Quick Layouts Overview

Qt快速布局概述

#【中秋征文】程序人生，中秋共享#

Qt快速布局是用于在用户界面中排列项目的项目。由于Qt快速布局还可以调整其项目的大小，因此它们非常适合可调整大小的用户界面。

开始

可以使用文件中的以下导入语句将 QML 类型导入到应用程序中。.qml

import QtQuick.Layouts 1.11

主要特点

一些主要功能是：

• 可以使用属性指定项目数
• 可以使用 和 属性指定。
• 可以使用 、 和属性指定（“宽度”可以替换为“高度”，以指定与高度类似的约束）。
• 可以使用 或 指定

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

• 可以使用 和 属性指定。
• 与 、 和 属性一起使用。
• 可以使用 和 属性跨行或跨列指定。

简单的布局

Window {RowLayout {anchors.fill: parentspacing: 6Rectangle {color: 'azure'Layout.preferredWidth: 100Layout.preferredHeight: 150}Rectangle {color: "plum"Layout.fillWidth: trueLayout.fillHeight: true}}
}

由于使用布局的目的是在布局更改大小时重新排列其子项，因此应用程序应确保调整布局的大小。在上面的代码片段中，通过指定 .但是，也可以通过其他方式，例如直接指定和属性。在同一代码段中，矩形具有固定大小的像素，矩形将扩展以占用它分配的所有空间。anchors.fill: parentazure(100, 150)plum

注意： 布局负责其子几何图形。因此，不应指定 、 、 或任何其他可能影响这些属性的属性（如 ）。否则就会有利益冲突，结果是不确定的。如果子项是布局，也是如此。因此，只有没有父布局的布局才能具有 。anchors.fill: parent

布局中的所有项目之间将有 6 个像素的间距：

spacing: 6

大小约束

由于可以通过其布局调整项目的大小，因此布局需要知道 或 设置为 的所有项目的大小。例如，以下内容将生成一个布局，其中两个并排放置且水平延伸的矩形。天蓝色矩形的大小可以从 50x150 调整为 300x150，梅花矩形的大小可以从 100x100 调整为 ∞x100。true

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

组合每个项的约束将为布局元素提供以下隐式约束：

	最低	首选	最大
隐式约束（宽度）	156	306	∞ (Number.POSITIVE_INFINITY)
隐式约束（高度）	150	150	150

因此，布局不能小于 156，也不能高于或小于 150，而不会破坏其子项的任何约束。

指定首选大小

对于每个项目，有效的首选大小可能来自几个候选属性之一。为了确定有效的首选大小，它将按以下顺序查询这些候选属性，并使用具有有效宽度或高度的第一个候选属性。

候选属性	描述
或	如果默认隐式大小未提供最佳排列，则应用程序应修改这些属性。
或	这些属性应该由每个项目提供，以提供有意义的理想大小，例如显示类型的所有内容所需的大小。隐式宽度或高度被解释为无效。0
和	如果上述属性都无效，则布局将采用 和 属性。

项目可以指定，而不必指定 。在这种情况下，有效首选高度将从 （或最终） 确定。

注意： 诉诸 or 属性仅作为最终回退提供。如果要覆盖首选大小，建议使用 或 。依赖 or 属性来指定首选大小可能会产生一些意外行为。例如，更改 or 属性不会触发布局重新排列。此外，当布局被迫进行完全重建时，它可能使用实际宽度和高度，而不是 QML 文件中指定的宽度和高度。

连接窗口和布局

您可以只使用普通的锚定概念来确保布局将遵循窗口大小调整。

RowLayout {id: layoutanchors.fill: parent

布局的大小约束可用于确保窗口的大小不能超出布局约束。您可以从布局中获取大小约束，并在 Window 元素的最小宽度、最小高度、最大宽度和最大高度上设置这些约束。以下代码确保窗口大小不能超出布局的约束：

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

注意： 由于布局。在这种情况下，Layout.maximumWidth 是无限的，我们不能将其绑定到 Window 的 maximumWidth 属性，因为这是一个整数。因此，我们将固定的最大宽度设置为 1000。

最后，您通常希望窗口的初始大小为布局的隐式大小：

width: layout.implicitWidth
height: layout.implicitHeight