qt - QML:下方带有图像和文本的按钮

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

您必须在图像和文本中使用 anchor 。示例:

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