Behavior that i cant explain between RowLayout and custom RowLayout nested in Rectangle

saltyFlow

Hello everybody,

I am fairly new to Qt and QML so i hope my question won't be too stupid. Sorry if it's the case.

While playing with Layouts ( I tried to encapsulate Row/Column Layouts into components to add "visual debugging" borders basically), I encounter a behavior that i can't explain.

Can someone provide some explanation please on why on the left the 3 items inside a RowLayout are stacked to the left? While on the right (custom RowLAyout nested inside a rectangle) it's evenly spaced of course

I would expect the left behavior to be the same as right

Thank you

My code:

// main.qml
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts

Window {
    id: root
    width: 800
    height: 600
    visible: true


    RowLayout {
        id: rl1
        anchors.fill :parent

        Rectangle {
            color: "transparent"
            border.color: "orange"
            Layout.fillHeight: true
            Layout.fillWidth: true
            ColumnLayout {

                anchors.fill: parent

                RowLayout {
                    Layout.fillWidth: true
                    Layout.preferredHeight: implicitHeight

                    Text {
                        text: "item3.1"
                        // Layout.fillHeight:true // Need to be commented else whole colomn is taken..
                        Layout.preferredWidth: implicitWidth
                        DebugRectangle {}
                    }
                    Text {
                        text: "item3.2"
                        // Layout.fillHeight:true
                        Layout.preferredWidth: implicitWidth
                        DebugRectangle {}
                    }
                    Text {
                        text: "item3.3"
                        // Layout.fillHeight:true
                        Layout.preferredWidth: implicitWidth
                        DebugRectangle {}
                    }

                }


            }
        }


        MyColumnLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true

            MyRowLayout {
                Layout.fillWidth: true
                Layout.preferredHeight: implicitHeight

                Text {
                    text: "item3.1"
                    Layout.fillHeight:true
                    Layout.preferredWidth: implicitWidth
                    DebugRectangle {}
                }
                Text {
                    text: "item3.2"
                    Layout.fillHeight:true
                    Layout.preferredWidth: implicitWidth
                    DebugRectangle {}
                }
                Text {
                    text: "item3.3"
                    Layout.fillHeight:true
                    Layout.preferredWidth: implicitWidth
                    DebugRectangle {}
                }
                // Rectangle { // spacer. Uncomment to achieve "left behavior"
                //     border.color: "blue"
                //     Layout.fillWidth: true
                //     Layout.fillHeight: true
                // }

            }
        }


    }





}

//DebugRectangle
import QtQuick

Rectangle {
    property var toFill: parent
    property color borderColor: "blue"
    property int borderWidth: 1

    anchors.fill: toFill
    z: 200
    color: "transparent"
    border.color: borderColor
    border.width: borderWidth
}

// MyColumnLayout.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Rectangle {
    id: root

    default property alias data: layout.data
    property alias myspacing: layout.spacing
    property color borderColor: "green"


    color: "transparent"
    border.color: borderColor
    radius: 2
    border.width: 2


    ColumnLayout {
        id: layout
        anchors.fill: parent

        // Set implicitWidth based on the widest child in the layout
        // implicitWidth: childrenRect.width
    }
}

// MyRowLayout.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Rectangle {
    id: root

    default property alias data: layout.data
    property alias myspacing: layout.spacing
    property color borderColor: "cyan"

    color: "transparent"
    border.color: borderColor
    radius: 2
    border.width: 2

    // Calculate implicitHeight based on the tallest child in the RowLayout
    implicitHeight: layout.implicitHeight

    RowLayout {
        id: layout
        anchors.fill: parent
        // anchors.margins: 10 // Default margin if no property overwrite

        // Set implicitHeight based on the tallest child in the layout
        implicitHeight: childrenRect.height
    }
}