QML - How to correctly set an implicitWith to a GridLayout

Question

I'm using Qml 5.12 and basically trying to set an implicitWidth to a GridLayout.

For that, I have a purple rectangle and set the rectangle's width to the GridLayout.

The red rectangle fit with the GridLayout so I can see the width of my GridLayout.

Here's my code:

Rectangle { anchors.fill: gl; color: "red"; opacity: 0.22 }
Rectangle { id: rect; width: 350; height: 30; color: "purple"; }

GridLayout
{
    id: gl
    y: 35
    implicitWidth: rect.width
    columns: 2
    Label { text: "This is a test" }
    SpinBox { Layout.alignment: Qt.AlignRight }
}

If I run the code, I expect to have my both rectangle with the same width. But the actual result is that the red rectangle is smaller. So the implicitWidth was not considerate.

Can anybody tell my why ?

Thank's !

I guess the GridLayout adjusts its size according to the content if no width set. From the Qt doc: implicitWidth : Defines the natural width or height of the Item if no width or height is specified. But GridLayout set its size implicitly and so _implicitWidth is not taken into account. — folibis

GrecKo GrecKo · Accepted Answer · 2019-05-09T18:18:44

The GridLayout compute its own implicitWidth based on its children's implicitWidth. So the value you set gets overwritten by the computed one.

implicitWidth is the width an Item wants to have (and the one it would have if no width is explicitely set). Setting it based on something else than its children or some internal value makes little sense.

Here you want the GridLayout to be the exact size of your Rectangle so just set its width property.

QML - How to correctly set an implicitWith to a GridLayout

1 Answers