QML does not center the component

Question

I have a simple component which is designed to show an image with some text under it as follows:

Rectangle{
    id: functionView

    RowLayout {
        spacing: 350
        anchors.centerIn: parent

        Item {
            Image {
                id: upload_pic
                source: "http://icons.iconarchive.com/icons/custom-icon-design/mono-general-4/128/upload-icon.png"
                Text {
                    text: "Upload Images"
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottomMargin: -20
                }
            }
            Layout.fillWidth: true
        }

        Item {
            Image {
                id: workflow_pic
                source: "http://icons.iconarchive.com/icons/icons8/windows-8/128/Data-Workflow-icon.png"
                Text {
                    text: "Upload Workflow"
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottomMargin: -20
                }
            }
            Layout.fillWidth: true
        }


    }
}

However, this is not aligned (either vertically or horizontally) on the component window. This can be verified using qmlscene. The images are directly linked in the component source.

Mo Abdul-Hameed Mo Abdul-Hameed · Accepted Answer · 2016-11-07T20:52:44

You are trying to center your RowLayout in its parent, which is a Rectangle that doesn't have its width property set. Set the rectangle's width to some value or to its parent width for example by width: parent.width or by setting its anchors like for example:

anchors.left: parent.left
anchors.right: parent.right

QML does not center the component

1 Answers