How to change the background color of a QML Button Qt Quick Controls 2?

Question

I just want to change the background color of QML buttons but it seems there are no simple way. Can you tell me a simple way to change the background color of QML Button? Thanks!

Update: a code I have searched:

import QtQuick 2.6
import QtQuick.Controls 2.1

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
        color: "black"  // I update background color by this
    }
}

Solution 1

The common way for QtQuick.Controls 2 is to redefine default Control visual properties to customize a Control. The disadvantage of this approach as I said above is that you cannot change, for example, just background color. Overriding Control.background forcing you to redefine all the element, including border, colors, animation etc.

Looking at the Button's source we can see that defines default Control.background property based on a Control.palette. Using this property we can override the Control properties:

For example:

Button {        
    text: "Test button"
    palette {
        button: "green"
    }
}

But you should understand that internal source could be changed in the future. Also you have to imagine for yourself what palette properties is used by specified Control.

In the example above I redefine palette for specified Control. But you can redefine the palette globally, either be setting the color in qtquickcontrols2.conf or by setting custom palette in C++ - QGuiApplication::setPalette().

Solution 2

Works with QT Quick 2:

Button {
        id: button
        text: qsTr("Button text")

        background: Rectangle {
                color: parent.down ? "#bbbbbb" :
                        (parent.hovered ? "#d6d6d6" : "#f6f6f6")
        }
}

The above code change the button color when the button is down or hovered. It is also possible to add a border or other customizations.

Solution 3

You can do this simply with Material.background of Button:

Button 
{
    id: button
    Material.background:Material.Red
}

Comments

[eyllanesc]

button: doc.qt.io/qt-5/qml-qtquick-controls-button.html or button doc.qt.io/qt-5/qml-qtquick-controls2-button.html???

[eyllanesc]

On the other hand, you point out that you are looking for a simple form, this makes me think that there is a non-simple form that you know, you could point it out.

[aviit]

I think qtquick-controls2. I will edit edit my question for adding a sample code.

[eyllanesc]

What is the problem with your code?

[aviit]

First, I saw that the code is not simple as background.color="black". So I think maybe I wrong. Second, it seem that I lost some default effects of the button, ex: when I press the button, there are no effect as normal.

[folibis]

Button.background is not just for setting color. In fact, you take over all the button rendering, except its caption. So all default effects as hovering and pressing animation you have to realize yourself. Take a look at the ButtonStyle example

[aviit]

@folibis: That is, I don't want to re-implement myself anything, I just want to change the background color simply and keep others as it were. About your link, it is qtquickcontrols1, can we mix 1 vs 2?

[aviit]

Thanks for your answer. Just for one who want to change the text color too: palette { button: "black" buttonText: "white" }

[Richard Jessop]

As of Quick.Controls 2.1, this does not work: Cannot assign to non-existent property "palette"

[Evan Krause]

With QtQuick.Controls 2.15 it doesn't work anymore: Unable to assign QString to QPalette