qtlayoutqmlflickable

How to space vertically QML objects in a Flickable using anchors?


How to space vertically QML objects in a Flickable using anchors?

The code snippet (reproduced below in this message) is supposed to display texts and images supplied by a C++ model (the C++ object is named Global in this snippet).

I get an error message on the line:

anchors { top: _lblMsg1.bottom+8; }

You get the idea of what I'm trying to do: I want the top of the image to be 8 pixels lower than the bottom of the text above it.

I get an error message, though it seems to be working.

Could you tell me, please, how I can do this correctly?

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

Solution

  • Anchors only accept other anchor lines for their values. However, you can use a margin to adjust the anchoring like so:

    anchors { 
        top: _lblMsg1.bottom;
        topMargin: 8;
        left:parent.left;
        right: parent.right;
    }