QML ToolButton not resizing

3
votes

I can't figure out why my ToolButton is so small. The ToolBar is the orange rectangle on the top. The following code:

Item{

    ToolBar{
        id: toolbar
        width: parent.width
        height: scaleDP(0.29)
        anchors.top: parent.top

        background: Rectangle{
            color: "orange"
        }

        RowLayout{
            anchors.fill: parent


            ToolButton {
                id: buttonBack
                height: parent.height
                width: parent.height
                Image {
                    id: imageBack
                    source: "qrc:/assets/images/left-filled-black-50.png"
                    anchors.fill: parent
                    anchors.margins: 4
                }


            }

Shows my ToolButton so small:

enter image description here

I can change the height of the Image and makes it bigger but then its outside the ToolButton. When I try to resize the height of the ToolButton, nothing happens

Findings

It seems the issue is with RowLayout. If I change it to Row or Rectangle, then the icons resizes as expected.

1
qtqmlqtquick2
QML layouts resize your elements, have you tried to play with Layout.minimumWidth : YOUR_BUTTON_WIDTH for example ? I guess you want a fixed size for your ToolButton, then you probably don't need a layout for this and just a Row - ymoreau

1 Answers

4
votes

The RowLayout uses its children's implicitHeight and implicitWidth, and ignores height and width. For some simple items (eg Rectangle), setting their height also changes their implicitHeight, but this is not the case for QuickControls like the ToolButton.

RowLayout{
    height: 20
    width: parent.width
    // WON'T WORK
    ToolButton {
        id: buttonBack1
        height: parent.height
        width: parent.height
    }
    // OK
    ToolButton {
        id: buttonBack2
        Layout.preferredHeight: parent.height
        Layout.preferredWidth: parent.height
    }
    // OK TOO
    ToolButton {
        id: buttonBack3
        implicitHeight: parent.height
        implicitWidth: parent.height
    }
}

If you still need a RowLayout, you have two options: