如何在 QML 中将 RowLayout 正确拆分为两个相等的字段？

Question

这是一个简单的例子：

RowLayout {
   spacing: 5

   ColumnLayout {
      Text {
         Layout.fillWidth: true
         text: qsTr("Some text")
      }
      Rectangle {
         Layout.fillWidth: true
         height: 100
         color: "red"
      }
   }

   ColumnLayout {
      Text {
         Layout.fillWidth: true
         text: qsTr("Some more text")
      }
      Rectangle {
         Layout.fillWidth: true
         height: 50
         color: "red"
      }
   }
}

这将产生两个相等领域width的RowLayout，但是为什么我必须指定Layout.fillWidth: true为所有的孩子？

这是Layout.fillWidth: true从Text组件中删除的相同示例：

RowLayout {
   spacing: 5

   ColumnLayout {
      Text {
         text: qsTr("Some text")
      }
      Rectangle {
         Layout.fillWidth: true
         height: 100
         color: "red"
      }
   }

   ColumnLayout {
      Text {
         text: qsTr("Some more text")
      }
      Rectangle {
         Layout.fillWidth: true
         height: 50
         color: "red"
      }
   }
}

这里的两个字段RowLayout在width.

Answer 1

您可以使用Layout.preferredWidth设置行元素的大小（绝对或相对）：

import QtQuick.Layouts 1.3
RowLayout {
    anchors.fill: parent
    spacing: 0
    Rectangle {
        Layout.preferredWidth: parent.width / 2
        Layout.fillHeight: true
        color: "green"
    }
    Rectangle {
        Layout.fillWidth: true
        Layout.fillHeight: true
        color: "yellow"
    }
}