How to implement an IconButton with text like IconTextSwitch?

asked 2019-06-22 18:37:50 +0300

jsommer gravatar image

Unfortunately the IconButton of Silica just offers a simple Button or IconButton and not an IconTextButton. Has someone a simple solution or do I have to tinker something from a Rectangle, MouseArea, Image, Label and many anchor proprterties? I found this workaround at StackOverflow:

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

Maybe there is something in the Silica private API.

edit retag flag offensive close delete

Comments

2

It may not be pretty or slick, but this works;

Page {

    IconButton {
        anchors.centerIn: parent
        icon.source: "image://theme/icon-m-sailfish"
        onClicked: console.log("clicked")

        Label {
            text: "sfos"
            anchors {
                top: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
        }
    }
}

image description

Edz ( 2019-06-22 22:18:02 +0300 )edit
1

@Edz Perfect. This works fine for me.

jsommer ( 2019-06-23 17:20:28 +0300 )edit