QML element's parent and children hierarchy question

Good evening,

my question relates to a rather simple idea, QML object parent and how their propeties are used by children.

In my application, I am using TabView to walk thru the different screen/forms. This is working well so far. I needed to added a new Tab in the existing TabView, and part of the content of this new tab is another TabView.
And this is where my problems start. Part of the QML declaration is listed here

Code:

---

property var controlWindow: Window {
        id: mainWindow
 
        visible: true
 
        x: 0
        y: 0
        width: 1280
        height: (800 + 1)                 // Addressing the screen flicker related to the Combobox elements
 
        ...
 
        TabView {
            id: tabView
 
            z: -1
            anchors.fill: parent
            anchors.topMargin: 40
 
            frameVisible: false
 
            Layout.minimumWidth: 1280
            Layout.minimumHeight: 800
            Layout.preferredWidth: 1280
            Layout.preferredHeight: 800
            Component.onCompleted: {
                console.log( "tabView.onCompleted, visible: ", visible, ", enabled: ", enabled)
                console.log( "x: ", x, ", y: ", y, ", width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
            }
            Tab {
                id: systemConfigTab
                title: qsTr( "System Management")
                source: "systemConfig.qml"
            }
            Tab {
                id: clientTab
                title: qsTr( "Client")
                source: "clientForm.qml"
            }
            ...
        }
    }

---

The content of systemConfig.qml is defined as follows:

Code:

---

ScrollView {
 
    id: systemConfigItem
 
    Item {
        x: 44
        y: 31
        width: 818
        height: 630
 
        TabView {
            id: systemConfigTabView
 
            width: systemConfigItem.width
            height: systemConfigItem.height
            z: -1
 
            anchors.fill: parent
 
            Layout.minimumWidth: systemConfigItem.width
            Layout.minimumHeight: systemConfigItem.height
            Layout.preferredWidth: systemConfigItem.width
            Layout.preferredHeight: systemConfigItem.height
 
            frameVisible: true          // the TabView frame is visible to get a visual reference; otherwise should be false
 
            Tab {
                id: backupTab
                title: qsTr( "Backup")
                source: "backupForm.qml"
            }
 
            Tab {
                id: userManagementTab
                title: qsTr( "User Management")
                source: "userManagementForm.qml"
            }
 
            Component.onCompleted: {
                console.log( "tabView.onCompleted, visible: ", visible, ", enabled: ", enabled)
                console.log( "x: ", x, ", y: ", y, ", width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
            }
        }
    }
}

---

Finally, a partial definition of the content of userManagementForm.qml is as follow:

Code:

---

ScrollView {
 
    id: userManagementView
    Component.onCompleted: {
        console.log( "userManagementView.ScrollView.Component.onCompleted(): parent width: ", parent.width, ", parent height: ", parent.height)
        console.log( "width: ", width, ", height: ", height)
    }
 
    Item {
        id: userManagement
 
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
 
        Component.onCompleted: {
            console.log( "userManagement.Item.Component.onCompleted(): parent width: ", parent.width, ", parent height: ", parent.height)
            console.log( "width: ", width, ", height: ", height, ", horizScaleFactor:", horizScaleFactor, ", vertScaleFactor: ", vertScaleFactor)
            console.log( "userManagementView.width: ", userManagementView.width, ", userManagementView.height: ", userManagementView.height)
        }
 
        SplitView {
            id: userMgmtSplitView
            width: userManagement.width
            height: userManagement.height
 
            orientation: Qt.Horizontal
            z: 2
 
            Component.onCompleted: {
                console.log( "userMgmtSplitView.SplitView.Component.onCompleted(): visible: ", visible, ", enabled: ", enabled)
                console.log( "width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
            }
 
            Item {
                id: userMgmtItem1
                width: ((parent.width / 3) - 20) * horizScaleFactor
                height: (parent.height - 20) * vertScaleFactor    //200
 
                Layout.maximumWidth: ((parent.width / 3) - 20) * horizScaleFactor
 
                Component.onCompleted: {
                    console.log( "userMgmtSplitView.userMgmtItem1.Component.onCompleted(): visible: ", visible, ", enabled: ", enabled)
                    console.log( "width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
                }
                ...
            }
            ...
        }
    }
}

---

In this phase of development, I am using Component.onCompleted() to verify the QML attributes. The clientTab, which is part of the original code, is still displayed correctly
Running the code, the following is reported:

Quote:

---

qml: tabView.onCompleted, visible: true , enabled: true
qml: x: 0 , y: 40 , width: 0 , height: -40 , parent width: 0 , parent height: 0

qml: clientTab.ScrollView.onCompleted, visible: true , enabled: true
qml: x: 0 , y: 0 , width: 1278 , height: 736 , parent width: 1278 , parent height: 736

qml: systemConfigTabView.onCompleted(): visible: true , enabled: true
qml: x: 0 , y: 0 , width: 818 , height: 630 , parent width: 818 , parent height: 630

qml: backupView.ScrollView.onCompleted(): parent width: 818 , parent height: 607
qml: width: 818 , height: 607

qml: userManagementView.ScrollView.Component.onComplete d(): parent width: 818 , parent height: 607
qml: width: 818 , height: 607

qml: userManagement.Item.Component.onCompleted(): parent width: 0 , parent height: 0
qml: width: 0 , height: 0
qml: userManagementView.width: 818 , userManagementView.height: 607

qml: userMgmtSplitView.operatorInfo.Component.onComplet ed(): visible: false , enabled: true
qml: width: -20 , height: 0 , parent width: 0 , parent height: 0

qml: userManagementForm.RowLayout.Component.onCompleted (): visible: false , enabled: true
qml: width: 136 , height: 28 , parent width: -20 , parent height: 0

qml: userMgmtSplitView.userMgmtItem1.Component.onComple ted(): visible: false , enabled: true
qml: width: -20 , height: -20 , parent width: 0 , parent height: 0

---

systemConfigTabView is a child of Item (in systemConfigItem), and the reported width and height attributes match its parent.
However, userManagement is a child of userManagementView, yet the reported parent and object width and height are 0.
The same is true for other QML elements in the rest of the declaration in the file.

What am I missing? The results are the same if I replace ScrollView by Item in userManagementForm.qml. Isn't it possible to have a TabView within a Tab?

Thanks in advance,
Daniel