How to properly split a RowLayout into two equal fields in QML?

Question

Here is a simple example:

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"
      }
   }
}

This will produce two equal fields in width of the RowLayout, but why do I have to specify Layout.fillWidth: true for all of the children?

Here is the same example by removing Layout.fillWidth: true from the Text components:

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"
      }
   }
}

Here the two fields of the RowLayout won't be same in width.

Answer 1

You can use Layout.preferredWidth to set size of row's element (absolute or relative):

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"
    }
}