QtQuick Layouts: Why don't the width and height settings affect anything inside the ColumnLayout?

[tomendop]

Hello everyone,
I've been working with QtQuick and have encountered an issue I can't quite wrap my head around.

In the example below, I've set the width and height of the Rectangle directly, expecting it to fill 10% of the parent's height and the full width. But, the Rectangle's size is zero

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Window")

    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            width: parent.width
            height: parent.height * 0.1
            color: "blue"
        }
    }
}

But when I modify the code to use Layout.preferredWidth and Layout.preferredHeight instead, the Rectangle sizes are as expected:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Window")

    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height * 0.1
            color: "blue"
        }
    }
}

Could anyone please explain this behavior?
Thank you in advance for your help!

[Bob64]

@tomendop see documentation for "Layout QML Type". It states:

Note: It is not recommended to have bindings to the x, y, width, or height properties of items in a layout, since this would conflict with the goals of Layout, and can also cause binding loops.

I can't say exactly what is going wrong in your example, but it is basically that you are doing something you aren't supposed to do when you choose to use the Layout mechanism.

I think it can be quite confusing as QML has a number of different ways to manage layout and it isn't always obvious which way is best or most appropriate.