QML TabButton在列中的位置

Question

我正在尝试将TabButtons垂直放置在TabBar中。但是每个TabButton的位置都在我不希望的位置。似乎它们是由根项锚定的。

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
            }
        }
    }
}

并且在QT创作者的设计师中，我可以看到下面的屏幕截图。 tab1的位置忽略了其锚点属性。谁能让我知道我的误会。

Answer 1

您的锚点设置不正确，您也不需要该列：

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
            }
        }
    }
}