QtQuick.Controls 2 Button icon

bnogal

Hello.
I am just porting my controls to use the version 2
I have just spent 3 hours trying to put an icon inside a QtQuick.Controls 2 Button. No success yet.

Lets say i use QML since the first version.

It's this uncommon to put an icon inside a button that we have RoundButton but not IconButton or an attach property or something simple and fast. What i missed?

Another problem is to be able to find documentation or examples using QtQuick.Controls 2...

Eeli K

@bnogal

Button {
  Image {}
}

Eeli K

Be sure to have the latest documentation, for the final 5.8 version it's much better than for earlier versions. In Qt Creator open Welcome->Examples and type 'controls 2'.

bnogal

thank you.

Really, i didnt find that anywhere in the documentation...
Sometimes it is hard to find out how to do something when you have a previous idea of how it was done before.
I would add that example to the documentation...

Eeli K

Yeah, there's plenty of information which is common to many classes/objects/things and is found in introductory parts of documentation but is difficult to remember when you need it. I felt stupid after fighting some time with the same problem. In this case the 'text' property is just a shorthand, I guess, it creates a Text item which is placed to the Button so that you don't have to write Button{Text{text:''...}}. But this is a general functionality for all items: whatever items you declare inside them are placed there. So there's no need to have 'icon' or 'image' or any other property or ButtonWithImage type. If you create many buttons with icons you can of course create your own type with a shorthand property 'icon' and extra functionality. Here¨'s mine which uses black icons:

import QtQuick 2.8
import QtQuick.Layouts 1.0
import QtQuick.Controls 2.0
//import QtQuick.Controls 2.1 // Qt >= 5.8.0 with RoundButton
import QtGraphicalEffects 1.0



//RoundButton { // Qt >= 5.8.0
Button {
    id: button
    text: ""
    implicitWidth: height
    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
    property string source
    
    Image {
        id: image
        fillMode: Image.PreserveAspectFit
        anchors.centerIn: parent
        sourceSize.height: button.background.height - 6
        height: sourceSize.height
        source: button.source
    }
    ColorOverlay {
        anchors.fill: image
        source: image
        // In dark styles background is dark, this makes the image white
        color: tools.isDarkTheme() ? "#ffffffff" : "00000000"
    }
}

Lorenz

Hi,

If you want to avoid all that boilerplate code, you could try out the AppButton and IconButton from the V-Play SDK.

With the V-Play SDK, you can add a nice, native-looking button with an icon with just these lines of code:

    AppButton {
      text: "Click me!"
      icon: IconType.heart
      // color etc...
    }

Note: this uses icons from FontAwesome.

All the best,
Lorenz