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.

Cómo espaciar verticalmente los objetos QML en un Flickable usando las anclas?

20 Jul, 2023 Programación

Cómo espaciar verticalmente objetos QML en un Flickable utilizando anclas?

El fragmento de código (reproducido a continuación en este mensaje) se supone que muestra textos e imágenes suministrados por un modelo C++ (el objeto C++ se llama Global en este fragmento).

Recibo un mensaje de error en la línea:

anchors { top: _lblMsg1.bottom+8; }

Tienes una idea de lo que estoy tratando de hacer: quiero que la parte superior de la imagen esté 8 píxeles más abajo que la parte inferior del texto que la precede.

Sin embargo, recibo un mensaje de error, aunque parece estar funcionando.

¿Podrías decirme, por favor, cómo puedo hacer esto correctamente?

Flickable {
    anchors.fill: parent;

    Label {
        id: _lblMsg1;
        text: Global.dataMessages.byId(Global.currService.msg_text1_id);
        anchors { top: parent.top; left:parent.left; right: parent.right; }
    }
    Image {
        id: _imgUri1;
        cache: false;
        source: (Global.currService && Global.currService.img_uri1 ? Global.currService.img_uri1 : "");
        asynchronous: true;
        anchors { top: _lblMsg1.bottom+8; left:parent.left; right: parent.right;}
        horizontalAlignment: Image.AlignHCenter;
        fillMode: (Image.width > 400 ? Image.Stretch : Image.Pad);
    }
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para espaciar objetos QML verticalmente en un Flickable usando anclas, puedes usar la sintaxis anchors.topMargin: x, donde x es el espaciado deseado en píxeles. Por ejemplo, para espaciar _imgUri1 8 píxeles debajo de _lblMsg1, puedes modificar el código relevante de la siguiente manera:

    _Label {
        id: _lblMsg1;
        text: Global.dataMessages.byId(Global.currService.msg_text1_id);
        anchors {
            top: parent.top;
            left: parent.left;
            right: parent.right;
        }
    }
    Image {
        id: _imgUri1;
        cache: false;
        source: (Global.currService && Global.currService.img_uri1 ? Global.currService.img_uri1 : "");
        asynchronous: true;
        anchors {
            top: _lblMsg1.bottom;
            topMargin: 8;
            left: parent.left;
            right: parent.right;
        }
        horizontalAlignment: Image.AlignHCenter;
        fillMode: (Image.width > 400 ? Image.Stretch : Image.Pad);
    }

    Ten en cuenta que anchors.top está configurado como _lblMsg1.bottom y anchors.topMargin se establece en 8. Esto asegura que la parte superior de _imgUri1 esté 8 píxeles debajo de la parte inferior de _lblMsg1.

    Con respecto al mensaje de error que estás recibiendo, es difícil decirlo sin más información. Es posible que estés recibiendo una advertencia porque estás usando el operador + para combinar dos anclas, lo cual no es una sintaxis válida. Pero siempre y cuando tu código funcione como se espera, puedes ignorar la advertencia.

Comments are closed.