Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QtQuick.Controls 2 Button icon
Forum Updated to NodeBB v4.3 + New Features

QtQuick.Controls 2 Button icon

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 3 Posters 12.9k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    bnogal
    wrote on last edited by
    #1

    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...

    E 1 Reply Last reply
    0
    • B 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...

      E Offline
      E Offline
      Eeli K
      wrote on last edited by
      #2

      @bnogal

      Button {
        Image {}
      }
      
      1 Reply Last reply
      0
      • E Offline
        E Offline
        Eeli K
        wrote on last edited by
        #3

        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'.

        1 Reply Last reply
        0
        • B Offline
          B Offline
          bnogal
          wrote on last edited by
          #4

          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...

          1 Reply Last reply
          0
          • E Offline
            E Offline
            Eeli K
            wrote on last edited by
            #5

            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"
                }
            }
            
            1 Reply Last reply
            1
            • LorenzL Offline
              LorenzL Offline
              Lorenz
              wrote on last edited by
              #6

              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

              Developer @ V-Play Engine - http://v-play.net/qt

              V-Play simplifies

              • Game Development with Qt
              • Mobile App Dev with Qt esp. iOS & Android

              What others say
              V-Play scored #1 in Cross-Platform App Development Tools Report - see why: https://goo.gl/rgp3rq

              1 Reply Last reply
              -1

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved