Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Change color of QML Button



  • Hello,

    I am developing a mobile application in QML and I need a rounded "Add" button.

    For that I am using the QML component RoundButton which gives me a nice rounded, shadowed button, with clicking animation.

    The problem is that it comes with its default gray color, which casually is the same as the background color that I am using.

    So my first option was to try to use the attribute color, with no success because "color is a non-existent property" in RoundButton.

    Then I googled a little and found in the docs that to customize a QML RoundButton you should follow the same method as described to customize a Button, which is to change its background attribute, so this I did:

        RoundButton {
        //...
            background: Rectangle {
                color: "blue"
            }
        }
    

    And that returned me a not so nice, squared, no shadow, not rounded or animated blue Button.

    So my question is if there is a way to change just the color (or another property) of an already stylized component.

    Thank you.



  • Try setting the background radius to the roundButton radius.
    This gets pretty close:

       RoundButton {
            id: myRoundButton
            text: "\u2713" // Unicode Character 'CHECK MARK'
            background: Rectangle {
                radius: myRoundButton.radius
                color: "blue"
            }
    
            onClicked: mainWindow.title = "Clicked!!"
        }
    


  • All Qt Quick Controls 2 come with a selection of Styles, which define the look and feel of the controls.

    So for example you can use the Material Style (for example by setting the environment variably to material, there are also other ways to set this)

    int main(int argc, char* argv[]) {
    
      qputenv("QT_QUICK_CONTROLS_STYLE", "material");
    }
    

    For every Qml Element you can now specify some attributes as you desire

    import QtQuick.Controls.Material 2.4
    
    ...
    RoundButton {
      width: 50 
      heigth: 50 
      anchors: { 
       ...
      }
    
      Material.background: Material.Blue
    }
    

    Now you have a fancy button with a blue background and a dark blue background when clicked. If you don't like the pre-defined colors, you can use the color function

    Material.background: Material.color(Material.blue, Shade100)
    

    Be aware that all children of your element will get this background color too if you don't set another color explicit. So if you want all buttons and all panes ... to be blue just write this line into your ApplicationWindow.

    Please take a lot at:
    https://doc.qt.io/qt-5.11/qtquickcontrols2-material.html
    for more about Material Style

    Here is an Overview of all available styles
    https://doc.qt.io/qt-5.11/qtquickcontrols2-styles.html

    If the attributes are not enough customization .... for example if you want a blue background, but when clicked red, then you can still modify the background attribute as mranger90 told you.
    Of course you override the default background as you noticed, but you can look it up here:
    https://github.com/qt/qtquickcontrols2/blob/5.11/src/imports/controls/material/RoundButton.qml
    (this would be the material implementation of the RoundButton template)

    Please mark the Thread as solved, if this is a solution for your problem.



  • @Leon_2001 Thank you for your answer, that is exactly what I was looking for.



  •                         Button{
                                text: "aaa"
                                Layout.maximumWidth: 100
                                Layout.leftMargin: 50
                                palette {
                                      button: "#aaddaa"
                                  }                       
                            }

Log in to reply