如何使用锚在 Flickable 中垂直间隔 QML 对象？答案

【问题标题】：How to space vertically QML objects in a Flickable using anchors?如何使用锚在 Flickable 中垂直间隔 QML 对象？
【发布时间】：2022-01-17 15:19:01
【问题描述】：

如何使用锚点在 Flickable 中垂直分隔 QML 对象？

代码 sn-p（在此消息的下方复制）应该显示由 C++ 模型提供的文本和图像（C++ 对象在此 sn-p 中命名为 Global）。

我收到一条错误消息：

anchors { top: _lblMsg1.bottom+8; }

你明白我想要做什么了：我希望图像的顶部比其上方文本的底部低 8 个像素。

我收到一条错误消息，但它似乎可以正常工作。

请告诉我，我该如何正确地做到这一点？

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

【问题讨论】：

您通常会在此处使用Column 而不是锚点来定位您的项目。

标签： qt layout qml flickable

【解决方案1】：

锚点只接受其他锚线作为它们的值。但是，您可以使用边距来调整锚定，如下所示：

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

【讨论】：