Cannot resize image for ToolButton in qml

[milan]

How can I resize image for ToolButton in qml. I followed this example.
http://doc.qt.io/qt-5/qml-qtquick-controls-toolbar.html. Icons are 256x256.

[Gojir4]

@milan Hi,

Using Layout attached properties may resolve your issue:

ToolButton {
    iconSource: "new.png"
    Layout.preferredHeight: 48
    Layout.preferredWidth: 48
}

[milan]

@Gojir4 . No, this does not help. Already tried this. I resized the icon using some image-editor. It is so difficult to work with qml.

[Gojir4]

@milan Sorry, I gave you the wrong code part. What is working on my side is that:

            ToolButton {
                Image{
                    source: "open.png"
                    width: 54
                    height: 54
                }
                Layout.preferredHeight: 54
                Layout.preferredWidth: 54
            }

[Gojir4]

@Gojir4 You could make a custom component to simplify:

//MyToolButton.qml
ToolButton {
    property alias source: img.source
    property int size: 32
    Image{
        id: img
        width: size
        height: size
    }
    Layout.preferredHeight: size
    Layout.preferredWidth: size
}

And then:

MyToolButton{
    source: "new.png"
    size: 48
}

[milan]

@Gojir4. Thanks for your answer. But It does not look same as one resized using image-editor.

Left are 32x32 from resized 256x256, and right ones are qml-resized using your code. I will go with image-editor resized.

[J.Hilk]

@milan
you could try enabling mipmap for a smoother transformation, this will make the resizing a bit slower and is the reason why it's off by default.

But if your image has a fixed size to begin with, than it doesn't matter much.

//MyToolButton.qml
ToolButton {
    property alias source: img.source
    property int size: 32
    Image{
        id: img
        width: size
        height: size

        mipmap: true
    }
    Layout.preferredHeight: size
    Layout.preferredWidth: size
}