StackLayout within ColumnLayout doesn't work

[mzimmers]

...at least, not for me, the way I'm trying to use it.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {

    visible: true
    width: 800
    height: 480

    ColumnLayout {
        TabBar {
            spacing: 30
            ListModel {
                id: prefsModel
                ListElement { name: "tab 1" }
                ListElement { name: "tab 2" }
                ListElement { name: "tab 3" }
            }

            Repeater {
                model: prefsModel
                TabButton {
                    width: 60
                    text: qsTr(model.name)
                }
            }
        }

        StackLayout {
            Rectangle {
                implicitWidth: 40
                implicitHeight: 40
                color: 'red'
            }
        }
    }
}

Coded this way, my Rectangle becomes as wide as the TabBar. Removing the StackLayout, it functions properly (but in my real app, I need the StackLayout).

What might I be doing wrong?

Thanks...

[jeremy_k]

I think the key is this:
https://doc.qt.io/qt-6/qml-qtquick-layouts-stacklayout.html

In contrast to most other layouts, child Items' Layout.fillWidth and Layout.fillHeight properties default to true. As a consequence, child items are by default filled to match the size of the StackLayout as long as their Layout.maximumWidth or Layout.maximumHeight does not prevent it.

[jeremy_k]

@mzimmers said in StackLayout within ColumnLayout doesn't work:

[...]
        StackLayout {
            Rectangle {
                implicitWidth: 40
                implicitHeight: 40
                color: 'red'
            }
        }
    }
}

Why is this using implicitWidth and implicitHeight instead of width and height?

[mzimmers]

@jeremy_k said in StackLayout within ColumnLayout doesn't work:

Why is this using implicitWidth and implicitHeight instead of width and height?

That's an artifact from my "real" code. Works the same way with just width and height.

[jeremy_k]

@mzimmers said in StackLayout within ColumnLayout doesn't work:

@jeremy_k said in StackLayout within ColumnLayout doesn't work:

Why is this using implicitWidth and implicitHeight instead of width and height?

That's an artifact from my "real" code. Works the same way with just width and height.

Thanks for the clarification. I was looking for and failing to find use as a component, which didn't make the cut.

I'm presuming from the lack of import versioning that this is happening with Qt 6. Is it platform and minor/patch version agnostic?

[mzimmers]

@jeremy_k said in StackLayout within ColumnLayout doesn't work:

I'm presuming from the lack of import versioning that this is happening with Qt 6. Is it platform and minor/patch version agnostic?

Yes, I'm using 6.4.2. Occurs on Windows. I could test it on Android if desired. I haven't applied any patches.

[JoeCFD]

This post is deleted!

[mzimmers]

@JoeCFD this is example is heavily reduced from my real app. Setting minimum and maximum values isn't feasible for that.

What I really want to know is why this is behaving the way it is. I can't find anything in the docs about nesting layouts causing problems, so it seems as though it should be OK.

[JoeCFD]

This post is deleted!

[mzimmers]

@JoeCFD according to the docs, there is no minimum/maximum height/width for a Rectangle (or for an Item).

[jeremy_k]

I think the key is this:
https://doc.qt.io/qt-6/qml-qtquick-layouts-stacklayout.html

In contrast to most other layouts, child Items' Layout.fillWidth and Layout.fillHeight properties default to true. As a consequence, child items are by default filled to match the size of the StackLayout as long as their Layout.maximumWidth or Layout.maximumHeight does not prevent it.

[JoeCFD]

@mzimmers Sorry. I got this from ApplicationWindow. That was wrong for Rectangle.

[mzimmers]

@jeremy_k that indeed was it. Good catch.

Thanks to all who looked.