Qt QML：下面有图像和文本的按钮

我正在尝试在QML中创建一个类似按钮的控件，该控件显示一个图像以及下面的一些文本。我目前的尝试如下：

  Item {
        id: button
        width: 30
        height: 100
        property alias text: buttontext
        signal clicked

        Image {
            id: visualImage
            anchors.fill: parent
            source: "qrc:/images/test.png"
        }

        Text {
            id: buttontext
            font.bold: true
            text: "Test"
        }
    }

---

不幸的是，这有很多问题。因此，目前，我正在指定项目的宽度和高度，但这应该根据图像和文本的宽度和高度进行计算。此外，文本显示在图像的顶部和内部，我希望将文本放置在图像下方，以图像水平居中，并带有一些边距。

必须在图像和文本中使用锚定。例如：

Item {
        id: button
        width: 30
        height: 100
        property alias text: buttontext
        signal clicked

        Image {
            id: visualImage
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: buttontext.top
            source: "qrc:/images/test.png"
        }

        Text {
            id: buttontext
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            font.bold: true
            text: "Test"
        }
    }

---

我过去做过一些事情作为解决这个问题的方法

创建一个矩形{……}，其中包含所有“按钮”项、文本/图像等

这可能不是最漂亮的方式，但也有一些变化

在photoshop外部创建“图像”和“文本”，无论你选择什么，然后用内容填充你的矩形，然后还设置一个MouseArea{onClicked{……}事件

在矩形内创建列/网格/行，并使用该方法定位项目

---

自QtQuick.Controls 2.3 Qt 5.10以来，引入了以下属性：

此属性确定按钮中图标和文本的显示方式

---

对于您的案例，它是AbstractButton.TextUnderIcon

这是我最初的方向，但我可能会先尝试评论中建议的专栏想法，因为它看起来更简单！有多种方法可以做你想做的事。最简单的方法是使用“查看”列，它非常容易使用。将witdh:parent.width同时设置为图像和文本，并将horizontalAlignment:text.AlignHCenter设置为文本：就是这样。这是一个很好的建议@巴卡罗佐：我听从了你的建议，终于找到了可行的办法。你想把它写下来作为答案，这样我就可以接受它并给你信用吗？