CODEWITHSUNDEEP
qtqmlqtquick2
adviner
adviner

Reputation: 3567

QML ToolButton not resizing

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.

Upvotes: 3

Views: 1957

Answers (1)

Yoann Quenach de Quivillic
Yoann Quenach de Quivillic

Reputation: 5336

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:

Upvotes: 6

Related Questions