QML TabButton positioning in Column

Question

I'm trying to position TabButtons in TabBar vertically. But the position of each TabButton is somewhere I didn't intend. It seems like they're anchored by root Item.

Item {
    id: element
    width:800; height:800
    Rectangle {
        id: container
        anchors.fill:parent
        color:"red"
        Rectangle {
            id: subContainer
            anchors.left:parent.left
            anchors.leftMargin: 100
            anchors.top:parent.top
            anchors.topMargin: 100
            width:200
            height:450
            TabBar {
                id: tabBar
                anchors.top:parent.top;
                anchors.bottom:parent.bottom
                anchors.left:parent.left;
                anchors.leftMargin:100
                width:120
                Column {
                    id: column
                    anchors.fill:subContainer //
                    TabButton {
                        id:tab1
                        anchors.top:tabBar.top; anchors.left:tabBar.left
                        width: tabBar.width; height:tabBar.height/3;
                    }
                    TabButton {
                        id:tab2
                        anchors.top:tab1.bottom; anchors.left:tabBar.left
                        width: tabBar.width; height:tabBar.height/3;
                    }
                    TabButton {
                        id:tab3
                        anchors.top:tab2.bottom; anchors.left:tabBar.left
                        width: tabBar.width; height:tabBar.height/3;
                    }
                } // End of Column
            } // End of TabBar
        }

        StackLayout { // this stack seems to be working as I've intended
            id: stack
            anchors.top:parent.top;
            anchors.bottom: parent.bottom;
            anchors.left : bar.right;
            anchors.right:parent.right
            Rectangle {
                id: homeTab
                color:"yellow"
                width: 300; height:300

            }
            Rectangle {
                id: discoverTab
                color:"skyblue"
                width: 300; height:300
            }
            Rectangle {
                id: activityTab
                color:"lightgray"
                width: 300; height:300
            }
        }
    }
}

And in designer of QT creator, I can see like below screen capture. tab1 is positioned ignoring it's anchors properties. Could anybody let me know what I'm misunderstanding.

Answer 1

Your anchors are not set properly, You also don't need that column:

Item {
    id: element
    width:800; height:800
    Rectangle {
        id: container
        anchors.fill:parent
        color:"red"
        Rectangle {
            id: subContainer
            anchors.left:parent.left
            anchors.leftMargin: 100
            anchors.top:parent.top
            anchors.topMargin: 100
            width:200
            height:450
            TabBar {
                id: tabBar

                anchors.top:parent.top;
                anchors.bottom:parent.bottom
                anchors.left:parent.left;
                width:120

                TabButton {
                    id:tab1
                    anchors.top:parent.top; anchors.left:parent.left
                    width: tabBar.width; height:tabBar.height/3;
                }
                TabButton {
                    id:tab2
                    anchors.top:tab1.bottom; anchors.left:parent.left
                    width: tabBar.width; height:tabBar.height/3;
                }
                TabButton {
                    id:tab3
                    anchors.top:tab2.bottom; anchors.left:parent.left
                    width: tabBar.width; height:tabBar.height/3;
                }
            } // End of TabBar
        }

        StackLayout {
            id: stack
            anchors.top:parent.top;
            anchors.bottom: parent.bottom;
            anchors.left : subContainer.right;
            anchors.right:parent.right
            Rectangle {
                id: homeTab
                color:"yellow"
                width: 300; height:300

            }
            Rectangle {
                id: discoverTab
                color:"skyblue"
                width: 300; height:300
            }
            Rectangle {
                id: activityTab
                color:"lightgray"
                width: 300; height:300
            }
        }
    }
}