How can I set iconSize in ToolButton?

Dimidroll93

Hi, all!
I would create a ToolButtons with icons like that
@
ToolBar{
anchors.fill: parent
RowLayout{
id: toolbarRow
anchors.fill: parent
spacing: 1*pixelDensity
ToolButton{
id:openFile
width: parent.height
iconSource: "qrc:/images/zoom.png"
}
}
}
@
I would like use my application both for desktop and mobile. It will be great to set toolbuttons icons as parent. But it appears in original size. How can I change icon size using QML?

Jens

True the ToolButton has a preferred platform specific icon size. For the time being the obvious workaround would be this:

@
ToolButton{
id:openFile
width: parent.height
Image {
source: "qrc:/images/zoom.png"
anchors.fill: parent
anchors.margins: 4
}
}
@

Dimidroll93

Thanks! All works as I wanted!

xiangzhai

Hi Jens,

Thank for your hint, I wrote MyToolButton.qml, it is inherited from Rectangle shown as below:

@
import QtQuick 2.0
import QtQuick.Controls 1.0

Rectangle {
id: myToolButton

property string text
property string source
property bool hovered
property bool clicked

width: 90
height: 93
color: "transparent"
border.width: 1
border.color: myToolButton.clicked ? "gold" : myToolButton.hovered ? "gold" : "transparent"
radius: 10

Image {
    id: myToolButtonIcon
    source: myToolButton.source
    y: myToolButton.y + 5
    anchors.horizontalCenter: myToolButton.horizontalCenter
}

Text {
    text: myToolButton.text
    y: myToolButtonIcon.y + myToolButtonIcon.height + 3
    anchors.horizontalCenter: myToolButtonIcon.horizontalCenter
}

}
@

Then I can use it in ToolBar like this:
@
ToolBar {
...
MyToolButton {...}
....
}@

snapshot shown as https://www.dropbox.com/s/hx9wu59nd7ni0ud/snapshot1.png

quicky

[[blank-post-content-placeholder]]

quicky

Hi Jens,

When using ToolButton and Actions the scaling seems to be wrong on Android. Adding an Image {} inside ToolButton and also setting the image source in an action would create two images. Is this a temporary scaling bug for Android or how should I do this correctly?

[quote author="Jens" date="1393503948"]True the ToolButton has a preferred platform specific icon size. For the time being the obvious workaround would be this:

@
ToolButton{
id:openFile
width: parent.height
Image {
source: "qrc:/images/zoom.png"
anchors.fill: parent
anchors.margins: 4
}
}
@[/quote]