Setting Layout.fillHeight: true make rectangle invisible In Qt Quick 2 - qt

Question

I'm trying to create a basic layout for my application. I want it to look like this . This is my set up so far.
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("basic layout")
ColumnLayout {
anchors.fill: parent
spacing: 0
Header {
Layout.fillWidth: true
height: 50
}
Body {
Layout.fillWidth: true
Layout.fillHeight: true
}
Footer {
Layout.fillWidth: true
height: 30
}
}
}
Header.qml
import QtQuick 2.7
import QtQuick.Layouts 1.3
Rectangle {
color: "red"
}
Footer.qml
import QtQuick 2.7
import QtQuick.Layouts 1.3
Rectangle {
color: "blue"
}
Body.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Item {
RowLayout {
anchors.fill: parent
Rectangle {
color: "red"
width: 100
Layout.fillHeight: true
}
Rectangle {
color: "green"
width: 400
Layout.fillHeight: true
}
Rectangle {
color: "blue"
width: 400
Layout.fillHeight: true
}
Rectangle {
color: "black"
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
When it's ran In the, the Body section I get is nothing but white space. Rectangles are visible when i give them a size manually. I tried adding anchors.fill: parent to Item level in Body.qml. Still result is the same. What am i doing wrong?

Answer 1

You have to set rectangle's width in the RowLayout using
Layout.preferredWidth: 400
instead of
width: 400