在 GridLayout 中自定义矩形的几何形状和位置会导致其中一个矩形消失

Question

我需要 QML 中相当简单的布局。

我现在已经在 GridLayout 上苦苦挣扎了一段时间，我实际上已经将其归类为满足此要求的正确选择 - 但它不起作用。

事情应该是这样的：

这就是目前的情况——右侧矩形（黄色）完全缺失。

这是我当前的代码：

ApplicationWindow {
    property real _encoderWidth: 254
    property real _headerHeight: 188
    property real _leftSideWidth: 70
    property real _keyboard1Height: 100
    property real _keyboard2Height: 180

    visible: true
    id: root
    objectName: "mainScreen" 
    width: 600 + _encoderWidth + _leftSideWidth 
    height: 800 + _headerHeight + _keyboard1Height + _keyboard2Height 
    minimumHeight: height
    maximumHeight: height
    minimumWidth: width
    maximumWidth: width

    GridLayout {
    id: grid
    anchors.fill: parent
    rows: 4
    columns: 3

        Rectangle {
            id: left
            Layout.column: 0
            Layout.rowSpan: 4
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: root.height
            Layout.maximumHeight: root.height
            Layout.minimumWidth: _leftSideWidth
            Layout.maximumWidth: _leftSideWidth
            color: "blue"
        }
        Rectangle {
            id: top
            Layout.row: 0
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: _headerHeight
            Layout.maximumHeight: _headerHeight
            Layout.minimumWidth: root.width
            Layout.maximumWidth: root.width
            color: "red"
        }
        Rectangle {
            id: right
            Layout.row: 0
            Layout.column: 2
            Layout.rowSpan: 4
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: root.height
            Layout.maximumHeight: root.height
            Layout.minimumWidth: _encoderWidth
            Layout.maximumWidth: _encoderWidth
            color: "yellow"
        }
        Rectangle {
            id: content
            Layout.row: 1
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: 800
            Layout.maximumHeight: 800
            Layout.minimumWidth: 600
            Layout.maximumWidth: 600
            color: "green"
        }
        Rectangle {
            id: bottom1
            Layout.row: 2
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: _keyboard1Height
            Layout.maximumHeight: _keyboard1Height
            Layout.minimumWidth: root.width
            Layout.maximumWidth: root.width
            color: "lightgray"
        }
        Rectangle {
            id: bottom2
            Layout.row: 3
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: _keyboard2Height
            Layout.maximumHeight: _keyboard2Height
            Layout.minimumWidth: root.width
            Layout.maximumWidth: root.width
            color: "gray"
        }
    }
}

布局不必是动态的，窗口大小是固定的且无法更改。

我该如何改进？

Answer 1

我在你的窗户里发现了两件奇怪的事情：

• 如果固定了所有尺寸，为什么还要使用布局？
• 为什么要对中间列中的项目使用

  root.width

  （除了

  green

  ，你在那里使用了 600）？
  可能正是这一点将黄色矩形推到了视口之外。

我不确定这些是您正在寻找的比例。

1. 我在顶部添加了 2 个变量。
2. 即使尺寸应该是固定的，我也保留了布局。
3. 我设置了首选尺寸而不是最小/最大尺寸。
   请注意，由于您似乎没有考虑矩形之间的空间（

   rowSpacing

   和

   columnSpacing

   ），因此确保矩形适合窗口的成本是他们的尺寸会与您期望的略有不同。
4. 我删除了左右项目的显式设置高度（它们应该填充它们跨越的所有 4 行。
5. 我删除了中间列中除 1 项之外的所有项的显式设置宽度（它们都应该填充可用宽度）。

剩下：

ApplicationWindow {
    property real _baseWidth: 600
    property real _baseHeight: 400
    property real _encoderWidth: 254
    property real _headerHeight: 188
    property real _leftSideWidth: 70
    property real _keyboard1Height: 100
    property real _keyboard2Height: 180

    visible: true
    id: root
    objectName: "mainScreen" 
    width: _baseWidth + _encoderWidth + _leftSideWidth 
    height: _baseHeight + _headerHeight + _keyboard1Height + _keyboard2Height 
    minimumHeight: height
    maximumHeight: height
    minimumWidth: width
    maximumWidth: width

    GridLayout {
    id: grid
    anchors.fill: parent
    rows: 4
    columns: 3

        Rectangle {
            id: left
            Layout.row: 0
            Layout.column: 0
            Layout.rowSpan: 4
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredWidth: _leftSideWidth
            color: "blue"
        }
        Rectangle {
            id: top
            Layout.row: 0
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: _headerHeight
            Layout.preferredWidth: _baseWidth
            color: "red"
        }
        Rectangle {
            id: content
            Layout.row: 1
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: _baseHeight
            color: "green"
        }
        Rectangle {
            id: bottom1
            Layout.row: 2
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: _keyboard1Height
            color: "lightgray"
        }
        Rectangle {
            id: bottom2
            Layout.row: 3
            Layout.column: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: _keyboard2Height
            color: "gray"
        }
        Rectangle {
            id: right
            Layout.row: 0
            Layout.column: 2
            Layout.rowSpan: 4
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredWidth: _encoderWidth
            color: "yellow"
        }
    }
}

如果需要，我可以让您微调，例如包括布局的间距。