QML TabButton позиционирование в столбце - PullRequest
Новая
       17

QML TabButton позиционирование в столбце

0 голосов
/ 17 февраля 2020

Я пытаюсь расположить TabButtons в TabBar по вертикали. Но положение каждого TabButton там, где я не собирался. Кажется, что они прикреплены к 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
            }
        }
    }
}

А в конструкторе создателя QT я могу видеть, как скриншот ниже. tab1 позиционируется без учета свойств якорей. Кто-нибудь может дать мне знать, что я неправильно понимаю.
enter image description here

1 Ответ

1 голос
/ 17 февраля 2020

Ваши привязки установлены неправильно, вам также не нужен этот столбец: 

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