QML：下方带有图像和文本的按钮答案

【问题标题】：QML: button with image and text underneathQML：下方带有图像和文本的按钮
【发布时间】：2016-06-18 11:34:51
【问题描述】：

我正在尝试在 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"
        }
    }

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

【问题讨论】：

有多种方法可以做你想做的事。最简单的方法是使用 qml 的Button(Image和Text里面创建MouseArea（你可以指定z选项使Text在Image下绘制）。您也可以创建自己的组件，尽管在大多数情况下这可能有点过头了。
看看Column，真的好用。将witdh:parent.width 设置为图像和文本，并将horizontalAlignment: Text.AlignHCenter 设置为文本：就是这样。
这是个好建议！
@BaCaRoZzo 我听从了你的建议，并且能够得到一些工作。你想把它写成答案，这样我就可以接受并给予你信任？

标签： qt qml

【解决方案1】：

自 QtQuick.Controls 2.3 (Qt 5.10) 以来，display 属性被引入：

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

你的情况是AbstractButton.TextUnderIcon

【讨论】：

【解决方案2】：

您必须在图像和文本中使用锚点。示例：

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

【讨论】：

这是我最初的方向，但我可能会先尝试评论中建议的Column 想法，因为它看起来更简单！

【解决方案3】：

我过去做过一些事情来解决这个问题，

创建一个Rectangle{……}，其中包含所有“按钮”项目，（文本/图像等），

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

在外部创建“图像”和“文本”（无论您选择 photoshop），然后用内容填充您的Rectangle，然后还为此设置一个MouseArea { onClicked {……}} 事件，
在Rectangle 中创建一个Column/Grid/Row 并使用该方法定位您的项目

【讨论】：