es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No funciona como se espera en mi caso.

27 Jul, 2023 Programación

Estoy creando un componente en QML, funciona bien pero quiero que el campo de TEXTO esté en el centro del rectángulo. Para eso, lo he anclado correctamente pero el ancla no funciona. No sé por qué.

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: "NOMBRE DE USUARIO"
                font.pixelSize: elem_txt_size
                anchors {
                    fill: parent
                    centerIn: parent    // ¡ESTO NO FUNCIONA!
                }
            }
        }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para centrar el campo de texto dentro del rectángulo en QML, puedes intentar hacer las siguientes modificaciones:

    • Elimina el anclaje “fill: parent” del elemento Text.
    • Agrega anclajes horizontales y verticales para centrar el texto dentro del rectángulo de Username.

    Tu código modificado debería lucir así:

    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 {
                    centerIn: parent
                    verticalCenterOffset: 0
                    horizontalCenterOffset: 0
                }
            }
        }
    }
}

    Con estos cambios, el campo de texto debería estar centrado dentro de su rectángulo padre. Si aún tienes problemas, verifica que el elemento padre esté correctamente dimensionado y actualizado antes de que los hijos sean distribuidos.

Comments are closed.