QML：图像并排文本在另一个文本下居中

Question

我目前能够在 text1 下居中 text2。当我尝试将图像元素与 text2 放在同一行时，我的问题就出现了。实现此目标的最佳方法是什么？

   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
    }

Answer 1

有点难以准确理解您所描述的问题，但您似乎在为图像项的定位而苦恼。如果是这种情况，您需要设置图像的垂直锚点，例如：

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

QML：图像并排文本在另一个文本下居中

QML: Image side by side Text centered under another Text

qt

qml