QtQuick 布局：为什么宽度和高度设置不影响 ColumnLayout 内的任何内容？

Question

我一直在使用 QtQuick，遇到了一个我无法完全理解的问题。

在下面的示例中，我直接设置了 Rectangle 的宽度和高度，期望它填充父级高度的 10% 和整个宽度。但是，矩形的大小为零

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Window")

    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            width: parent.width
            height: parent.height * 0.1
            color: "blue"
        }
    }
}

但是当我修改代码以改为使用 Layout.preferredWidth 和 Layout.preferredHeight 时，矩形大小符合预期：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Window")

    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height * 0.1
            color: "blue"
        }
    }
}

有人可以解释这种行为吗？

提前感谢您的帮助！

Answer 1

QML 中的

Layouts 根据组件Layout 属性中为它们设置的属性计算其子项的大小。要了解 QML 布局的基本概念，我建议阅读文档：

QT 快速布局

特别这部分会给你答案

正如您已经发现的那样，您无法为布局中的项目定义高度和宽度。您必须使用其他方式，例如 preferredWidth 和 preferredHeight