I am currently able to center text2 under text1. My issue arises when I try to place the Image element on the same line as text2. What is the best way to achieve this?

   Text {
        id: text1
        anchors.fill: parent
        text: qsTr("No tests results")
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }


    Image {
        anchors.right: text2.left
        source: "icons"
        key: { 'col': 1, 'row': 0 }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("Clicked")
            }
        }
    }

   Text {
        id: text2
        anchors.fill: parent
        anchors.top: text1.bottom
        anchors.topMargin: 60
        text: qsTr("Retry")
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

CodePudding user response：

It's a little hard to understand exactly what the issue is you're describing, but it seems you may be fighting with positioning of your Image Item. If that's the case, you need to set your Image's vertical anchors, so something like:

Image {
    anchors.right: text2.left
    anchors.verticalCenter: text2.verticalCenter
    source: "icons"
    key: { 'col': 1, 'row': 0 }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("Clicked")
        }
    }
}