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

button: http://doc.qt.io/qt-5/qml-qtquick-controls-button.html or button https://doc.qt.io/qt-5/qml-qtquick-controls2-button.html??? — eyllanesc, Sep 03 '18 at 23:42
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. — eyllanesc, Sep 03 '18 at 23:44
I think qtquick-controls2. I will edit edit my question for adding a sample code. — aviit, Sep 04 '18 at 00:05
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. — aviit, Sep 04 '18 at 00:15
`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](http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle.html#details) — folibis, Sep 04 '18 at 05:56
@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, Sep 04 '18 at 06:26

folibis · Accepted Answer · 2018-09-04T06:56:51.357

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

Thanks for your answer. Just for one who want to change the text color too: `palette { button: "black" buttonText: "white" }` — aviit, Sep 04 '18 at 13:26
As of Quick.Controls 2.1, this does not work: Cannot assign to non-existent property "palette" — Richard Jessop, May 31 '19 at 15:37
With QtQuick.Controls 2.15 it doesn't work anymore: ```Unable to assign QString to QPalette``` — Evan Krause, May 02 '22 at 21:46

score 11 · Answer 2 · answered Mar 22 '21 at 09:23

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.

score 4 · Answer 3 · answered Oct 28 '21 at 18:41

4

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

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

answered Oct 28 '21 at 18:41

mohsen

1,763
3
17
55

This only works if you are using the Material Style or have an attached property called `Material` with a property `background`. – Logan May 02 '23 at 18:32

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

3 Answers3