QML/QtQuick - 在 ColumnLayout 中覆盖的图像答案

【问题标题】：QML/QtQuick - Images overwritten in ColumnLayoutQML/QtQuick - 在 ColumnLayout 中覆盖的图像
【发布时间】：2014-03-14 04:23:08
【问题描述】：

当我将多张图片放入 ColumnLayout 时，它们会覆盖自己，而我只看到最后一张。

这是我的代码示例：

Rectangle{
    width: parent.width
    color: "#00ffffff"
    height: 370
    ColumnLayout{
        width : parent.width
        spacing : 0
        Image {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            source: "img/img1.png"
        }
        Image {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            source: "img/img2.png"
     }
        Image {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            source: "img/img3.png"
        }
    }
}

你知道我怎样才能看到 3 张图片一个在另一个下面吗？

【问题讨论】：

标签： qt qml qtquick2

【解决方案1】：

这是因为您在执行此操作时强制图像垂直和水平居中：

Image {
  anchors.horizontalCenter: parent.horizontalCenter
  anchors.verticalCenter: parent.verticalCenter
  source: "img/img3.png"
}

如果您希望图像水平居中但同时保持列中的布局，则应从Image 组件中删除anchors.verticalCenter 属性

【讨论】：

谢谢！就是这样。我从我的图像组件中删除了“anchors.verticalCenter”属性，并将它放在上面的 ColumnLayout 中，这样就成功了。谢谢。