qt - 如何在 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为了所有的 child ？

这是删除 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"
    }
}