Question

是错误还是功能？

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

ApplicationWindow {
    id: root
    height: 600
    width: 800

    ColumnLayout {
        id: rootLayout
        anchors.fill: parent
//        width: parent.width
//        height: parent.height

        Rectangle {
            color: "red"
            width: parent.width
            height: 200
        }
        Rectangle {
            color: "green"
            width: parent.width
            height: 200
        }
        Rectangle {
            color: "blue"
            width: parent.width
            height: 200
        }   
    }
}

这段代码似乎不能满足我的需要。它应打开一个窗口，在Rectangle等于父width且width等于height的列中绘制三个200。

一切正常，在每个Rectangle中我将width和height属性更改为constans值（200，300等）但是我想让它相对于父布局。

当我输入Rectangle项width: root.width时，它也有效。那么为什么在我的代码中打字时它不起作用呢？

Answer 1

使用Layout.fillWidth: true：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

ApplicationWindow {
    id: root
    height: 600
    width: 800
    visible: true

    ColumnLayout {
        id: rootLayout
        anchors.fill: parent

        Rectangle {
            color: "red"
            Layout.fillWidth: true
            height: 200
        }
        Rectangle {
            color: "green"
            Layout.fillWidth: true
            height: 200
        }
        Rectangle {
            color: "blue"
            Layout.fillWidth: true
            height: 200
        }
    }
}

Layout documentation解释了它的用法：

布局的子项附加布局类型的对象，以提供有关项目的布局特定信息。附加对象的属性会影响布局如何排列项目。

例如，如果默认值不满意，您可以指定minimumWidth，preferredWidth和maximumWidth。

调整布局大小时，项目可能会增大或缩小。因此，物品具有最小尺寸，首选尺寸和最大尺寸。

如果未在项目上显式指定最小大小，则将大小设置为0. 如果未在项目上显式指定最大大小，则将大小设置为Number.POSITIVE_INFINITY。

对于布局，隐式最小和最大大小取决于布局的内容。

fillWidth和fillHeight属性可以为true或false。如果为false，则项目的大小将固定为其首选大小。否则，随着布局调整大小，它将在最小和最大尺寸之间增大或缩小。

重要提示：

注意：建议不要对布局中项目的x，y，width或height属性进行绑定，因为这会与布局的目标发生冲突，并且还会导致绑定循环。 /强>

您应该遵循此建议，并替换

height: 200

与

Layout.fillHeight: true

因为你的矩形都是相同的大小。在这种情况下，矩形将全部争夺可用高度，布局将给予它们相同的百分比。

因此，有几种方法可以在布局中调整项目的大小，但fillWidth是专为您的用例设计的。

Answer 2

不用担心，这不是一个错误。还必须使用Layout组件使用附加属性调整ColumnLayout（RowLayout和GridLayout中的项目）。它们允许我们通过设置项目对齐，最小/最大尺寸或是否应使用整个width / height来创建复杂结构。根据您的代码查看此代码：

import QtQuick 2.5
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: root
    height: 600
    width: 800

    ColumnLayout {
        id: rootLayout
        anchors.fill: parent

        Rectangle {
            color: "red"
            Layout.fillWidth: true
            height: 150
        }
        Rectangle {
            color: "green"
            Layout.preferredWidth: 400
            Layout.alignment: Qt.AlignHCenter
            height: 100
        }
        Rectangle {
            color: "blue"
            Layout.maximumWidth: 300
            Layout.preferredWidth: 400 //actual width will be 300(=maximumWidth)
            Layout.fillHeight: true
        }   
    }
}

将width或height设置为常量值似乎也有效，但我会使用为这些组件提出的API。

我希望这对你有所帮助。

Rectangle不采用其父高度/宽度

2 个答案: