In QML, why does Layout.verticalStretchFactor or Layout.horizontalStretchFactor not work?

[isaacchangwang]

As the official document says, there are two attached properties since Qt 6.5, Layout.verticalStretchFactor and Layout.horizontalStretchFactor, which allow you to specify the vertical and horizontal stretch factor. For example, if the first item has a stretch factor of 1 and the second item has a stretch factor of 2, the first item will aim to get 1/3 of the available space, and the second will aim to get 2/3 of the available space.

However, I had a try and did not get the expected result. The two items had the same size. Here is the code:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

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

    ColumnLayout {
        anchors.fill: parent

        Rectangle {
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.verticalStretchFactor: 1
            border.color: "red"
        }

        Rectangle {
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.verticalStretchFactor: 2
            border.color: "blue"
        }
    }
}

The same problem for Layout.horizontalStretchFactor. I am using Qt 6.7.2. Is there anything wrong?

[jeremy_k]

I'm minimally familiar with Quick Layouts (anchors FTW!), but the documentation says:

Likewise, when a vertical layout has its preferred height, all child items will have their preferred heights, and when a vertical layout has its maximum height, all child items will have their maximum heights. This strategy is applied regardless of what the individual stretch factors are. As a consequence of this, stretch factors will only determine the growth rate of child items between the preferredHeight and maximumHeight range.

Setting Layout.preferredHeight, or the item's implicitHeight, enables use of the verticalStretchFactor.

[Aleksey Asensus]

Have the same problem, solved by adding preferredWidth:

RowLayout {
    spacing: 0

    Rectangle {
        Layout.fillWidth: true
        Layout.horizontalStretchFactor: 2
        Layout.preferredWidth: parent.width * 2 / 3
        Layout.fillHeight: true
        color: color.neutral
        opacity: 0.7
    }

    Rectangle {
        Layout.fillWidth: true
        Layout.horizontalStretchFactor: 1
        Layout.preferredWidth: parent.width / 3
        Layout.fillHeight: true
        color: color.dialog
    }
}

However in this case fillWidth and horizontalStretchFactor are unnecessary. Will report a bug.

[Aleksey_K]

QTBUG-136489