How can I set iconSize in ToolButton?



  • 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?



  • 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
    }
    }
    @



  • Thanks! All works as I wanted!



  • 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



  • [[blank-post-content-placeholder]]



  • 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]


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.