anchor.centerIn 在我的案例中没有按预期工作

Question

我正在 QML 中创建一个组件，工作正常，但我希望文本字段位于矩形的中心。为此，我相应地锚定了它，但锚点不起作用。不知道为什么。

Item {

    id: root

    property int main_rect_height: 32
    property int elem_txt_size: 14
    property string elem_border_color: "red"
    property int elem_width: parent.width/6.5

    Rectangle {
        id: clients_rect
        width: root.parent.width-27
        height: main_rect_height
        color: "transparent"
        border.color: "black"

        Rectangle {
            id: username_rect
            width: elem_width
            height: parent.height
            color: "transparent"
            border.color: elem_border_color
            Text {
                id: username_txt
                text: "USERNAME"
                font.pixelSize: elem_txt_size
                anchors {
                    fill: parent
                    centerIn: parent    // THIS DOESN'T WORK!
                }
            }
        }
}

Answer 1

通过使用 anchors.fill: parent，您可以设置文本对象的大小和位置以匹配父对象。将相同大小的对象居中不会做任何事情，因为它已经占据了父对象的整个 space。默认情况下，文本与顶部和左侧对齐。您有两个选择：

您可以使用文本的对齐属性将其内部的文本居中对齐：

Text {
    anchors.fill: parent
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

或者，您可以简单地使用 centerIn 而无需 fill。

Text {
    anchors.centerIn: parent
}

anchor.centerIn 在我的案例中没有按预期工作

anchor.centerIn doesn't work as expected in my case

qt

qml

qtquick2