QML/QtQuick - Images overwritten in ColumnLayout

Question

When I put several images in a ColumnLayout, they overwrite themselves and I see only the last one.

Here is a sample of my code :

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"
        }
    }
}

Do you have any idea on how I can manage to see the 3 images one below the other ?

koopajah koopajah · Accepted Answer · 2014-02-14T18:59:57

That is because you are forcing the image to be centered vertically and horizontally when doing this:

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

If you want your images to be centered horizontally but at the same time keep the layout in the column you should remove the anchors.verticalCenter property from your Image components

QML/QtQuick - Images overwritten in ColumnLayout

1 Answers