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: parent
azure
(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