Question

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

遗憾的是，这有很多问题。所以，目前，我正在指定项目的宽度和高度，但这应该根据图像和文本的宽度和高度来计算。此外，文本显示在图像的顶部和内部，我希望将文本放置在图像下方，水平居中，图像为中心。

Answer 1

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

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

Answer 2

我过去作为解决此问题的方法

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

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

在外部创建“图片”和“文字”（无论您选择的是photoshop），然后在内容中填充Rectangle，然后为此设置一个MouseArea { onClicked {……}}事件，
在Column/Grid/Row中放置一个Rectangle，然后使用该方法放置您的物品

Answer 3

自QtQuick.Controls 2.3（Qt 5.10）开始，引入了display属性：

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

您的情况是AbstractButton.TextUnderIcon

QML：

3 个答案: