QML: button with image and text underneath

Question

I am trying to create a button like control in QML which displays an image and also some text under it. My current attempt stands as follows:

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

This has a lot of problems unfortunately. So, at the moment, I am specifying the width and height of the item but this should be calculated based on the width and height of the image and the text. Also, the text is shown at the top and inside the image where I would like to position the text under the image, centered with image horizontally with some margins.

There are multiple ways to do what you want. The simplest would be using Button(<-clickable) class of qml and specify it's icon, text and style options. You can also create MouseArea with Image and Text inside (you can specify z option to make Text to be drawn under Image). You can also create your own component, though it may be overkill in most situations. — user2487382
Take a look at Column, it's really easy to use. Set witdh:parent.width to both image and text and also set horizontalAlignment: Text.AlignHCenter to the text: that's it. — BaCaRoZzo
@BaCaRoZzo I followed your suggestion and was able to get something working. Do you want to write it as an answer, so I can accept it and give you credit? — Luca

Fabio Fabio · Accepted Answer · 2016-03-04T16:33:58

You must use anchors in the Image and in the Text. Example:

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

QML: button with image and text underneath

3 Answers