如何在 QML 中设计多层流体布局

我在 QML 中设计了一个布局，以了解有关其功能的更多信息，并对设计此类布局的“最佳实践”有一些疑问。这里是：

它本质上是一个列布局由三个组成行布局s，每一个都有一些长方形s。每行和矩形的大小应计算如下：

• First row: Height = 40%, Width = 100%
  • 红色矩形填充整个区域
• Second row: Height = 20%, Width = 100%
  • 深绿色矩形：高度 = 100%，宽度 = 20%，
  • 浅绿色矩形：高度 = 100%，宽度 = 80%
• Third row: Height = 40%, Width = 100%
  • 深蓝色矩形：高度 = 100%，宽度 = 40%，
  • 蓝色矩形：高度 = 100%，宽度 = 20%
  • 浅蓝色矩形：高度 = 100%，宽度 = 40%

我提出的 QML 正在运行，如下所示。我对此有一些疑问：

1. 我已经使用设置了宽度和高度百分比Layout.preferredHeight: x*parent.height图案。其他选项导致了一些问题（例如，preferredHeight 导致绑定循环警告）。我的方法正确且有效吗？
2. 作为一名黑客，我设置了布局.fillWidth: true对于第 2 行和第 3 行的第一个元素，这对我来说没有意义，但确实有效。如果我将它们的宽度设置为百分比（例如布局.preferredWidth: 0.2*parent.width）他们的行将折叠到宽度 0。这是预期的行为吗？有没有更好的解决方法？
3. 您对布局有什么建议吗？我走在正确的道路上吗？

这是我的布局 QML 代码：

ApplicationWindow {
    x: 500
    y: 100
    width: 250
    height: 150
    visible: true

    ColumnLayout {
        anchors.fill: parent
        spacing: 0
        RowLayout {
            spacing: 0
            Layout.preferredHeight: 0.4*parent.height
            Layout.fillHeight: false
            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "red"
            }
        }
        RowLayout {
            spacing: 0
            Layout.preferredHeight: 0.2*parent.height
            Layout.fillHeight: false
            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "darkGreen"
            }
            Rectangle {
                Layout.fillHeight: true
                Layout.preferredWidth: 0.8*parent.width
                color: "lightGreen"
            }
        }
        RowLayout {
            spacing: 0
            Layout.preferredHeight: 0.4*parent.height
            Layout.fillHeight: false
            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "darkBlue"
            }
            Rectangle {
                Layout.fillHeight: true
                Layout.preferredWidth: 0.2*parent.width
                color: "blue"
            }
            Rectangle {
                Layout.fillHeight: true
                Layout.preferredWidth: 0.4*parent.width
                color: "lightBlue"
            }
        }
    }
}

Update:

我的方法似乎比我预期的更老套：

1. Putting Text元素作为此布局中的子元素引发结合环警告如：

QML QQuickLayoutAttached：检测到属性“preferredWidth”的绑定循环

如果将 Text 包裹在长方形警告消失。

2. The 间距：0似乎发挥着重要作用。省略它会导致绑定循环警告。

虽然我在 QML 中进行流体布局设计的方法有效，但它存在一些严重的问题，并且可能不属于“最佳实践”。

虽然其他两个答案都显示了有效的解决方案，但我相信所提出的问题和两个解决方案都在某种程度上错过了使用布局的要点。

基本上，布局是为了将具有隐式大小（implicitHeight/implicitWidth）的项目组合在一起。 Layout.preferredWidth/Layout.preferredHeight 用于在极少数情况下覆盖这些内容，请参见下文。 Qt 附带的“Qt 快速布局 - 基本示例”根本不使用 Layout.preferredWidth/Layout.preferredHeight（！），并且外观非常漂亮，不会用锚点或布局属性污染整个 qml 文件。自己需要一些学习才能做到这一点，但是一旦习惯了，布局就是一种用更少的代码更直接地定义用户界面的方法。

一开始最让我困惑的是以下几件事：

• RowLayout/ColumnLayout/GridLayout 的 Layout.fillWidth/Layout.fillHeight 设置为 true，因此当将它们放在 Item/矩形附近时，Item/矩形会突然消失，因为它们没有设置这些值（即它们有 Layout. fillWidth/Layout.fillHeight 设置为 false）。
• 项目/矩形的隐式高度/隐式宽度为 0，这意味着它们与布局并排运行效果不佳。最好的办法是从包含的子项中派生隐式宽度/隐式高度，就像 RowLayout/ColumnLayout 本身默认为其子项所做的那样。
• Layout.preferredWidth/Layout.preferredHeight 可用于克服已定义且无法设置的隐式尺寸。其中一个位置直接位于布局项中，另一个位置例如是一个文本项，它也不允许您覆盖隐式大小。

考虑到这些点，我将按以下方式编写示例。我删除了不必要的项目，以更好地说明何时需要 Layout.fillwidth/Layout.fillheight，以及我认为何时使用隐式宽度更好。

import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    width: 250
    height: 150
    visible: true

    ColumnLayout {
        spacing: 0
        anchors.fill: parent
        Rectangle {
            implicitHeight: 40
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "red"
        }
        RowLayout {
            spacing: 0
            Layout.preferredHeight: 20
            Rectangle {
                implicitWidth: 20
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "darkGreen"
            }
            Rectangle {
                implicitWidth: 80
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "lightGreen"
            }
        }
        RowLayout {
            spacing: 0
            Layout.preferredHeight: 40
            Rectangle {
                implicitWidth: 40
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "darkBlue"
            }
            Rectangle {
                implicitWidth: 20
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "blue"
            }
            Rectangle {
                implicitWidth: 40
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "lightBlue"
            }
        }
    }
}