ImplicitWidth of RowLayout strange behavior when resizing layouts

[swimmingmachine]

Hi, I am using QtQuick.Layouts to make a camera surveillance software where the software shows different numbers of camera viewports such as 3x4 and 3x6 by clicking the 3x4 or 3x6 buttons. Each viewport has a Rowlayout component. I found the implicitWidth of RowLayout has a larger value in a smaller layout (3x6) than in a larger layout(3x4) (ApplicationWindow size is the same), whereas the width of RowLayout is consistent with the layout size (larger layout has larger width). I need to compare "implicitWidth" with "width" of Rowlayout in order to re-arrange items in each camera view. The strange behavior of implicitWidth prevents me from re-arranging items correctly. How is implicitWidth calculated? How to correctly use implicitWidth to compare with width?

The code is below. The contents in ToolButtons and Texts components were omitted for simplicity.

ApplicationWindow {
    id: appWindow
    visible: true

    width: 1600
    height: 900

    minimumWidth: 1200
    Rectangle {
        id: mainForm
        width: 1280
        height: 720
        border.width: 5
        color: "black"
        focus: true
        GridLayout {
                id: gridMain
                columnSpacing: 2
                rowSpacing: 2
                anchors.rightMargin: 3
                anchors.leftMargin: 3
                anchors.bottomMargin: 3
                anchors.topMargin: 3
                anchors.fill: parent

                rows: 3
                columns: 6
              // e.g. repeat 3x6 the following Rectangles to fill the gridlayout. 

                Rectangle {
                    id: root
                    color: "black"
                    border.width: 3
                    border.color: "green"
                    Layout.fillHeight: true,
                    Layout.fillWidth : true,
                    Layout.row: gridHelper(i, true),
                    Layout.column: gridHelper(i, false),
                    visible: true,
                    cameraName: "None",
                    room: "",
                    viewId : i,
                    Layout.minimumWidth: rowLayout.Layout.minimumWidth + 2 * margin
                    Layout.minimumHeight: rowLayout.Layout.minimumHeight + 2* margin
                    property int margin: 11

                    ColumnLayout {
                        id: columnLayout

                        anchors.rightMargin: 3
                        anchors.leftMargin: 3
                        anchors.bottomMargin: 3
                        anchors.topMargin: 3
                        anchors.fill: parent
                        anchors.margins: 1
                        Layout.fillWidth: true
                        objectName: "colLayout"

                        ToolBar {
                            id: toolBar
                            opacity: 1
                            Layout.fillHeight: false
                            Layout.fillWidth: true

                            background: Rectangle{
                                color: "black"
                            }

                            RowLayout {
                                id: rowLayout
                                Layout.minimumWidth: 150
                                anchors.fill: parent
                                anchors.margins: 2
                                    ToolButton{}
                                    ToolButton{}
                                    Text {}
                                    Text {}
                                    Item{}
                                    Text {}
                            }
                        }
                    }
                }
        }
    }
}