How do I set the Button.down color in QtQuick Qt6?

Question

I've been following an older tutorial to learn about QtQuick. I've had to modify the tutorial in order to attain the correct behavior. So far, most of it is working, but I'm stuck on setting the color when a custom button is actually pressed. So at the moment, I have successfully set the default color and the hovered color. However, when I press the button, the inherited color is showing.

In looking through the docs, setting flat:true keeps the redraw of the background from happening unless clicked. How do I keep the redraw from happening WHEN clicked? Or perhaps there is a better way?

Here is my minimum working example:

import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    id: btnToggle

    property color btnColorDefault: "#0000ff"
    property color btnColorMouseOver: "#00ff00"
    property color btnColorClicked: "#ff0000"


    implicitWidth: 70
    implicitHeight: 60
    flat: true

    background: Rectangle {
        id: bgBtn
        color: btnToggle.down ? btnColorClicked :
                                ( btnToggle.hovered ? btnColorMouseOver : btnColorDefault)
    }
}

Answer 1

Using a Template should solve the issue. I remember that if you don't use templates the native style can kick in at times. I had this issue with ScrollBar styling on Windows.

Your example is working fine on my Linux machine.

import QtQuick
import QtQuick.Templates as T

T.Button {
    id: btnToggle

    property color btnColorDefault: "#0000ff"
    property color btnColorMouseOver: "#00ff00"
    property color btnColorClicked: "#ff0000"

    implicitWidth: 70
    implicitHeight: 60
    flat: true

    background: Rectangle {
        id: bgBtn
        color: btnToggle.down ? btnColorClicked :
                                ( btnToggle.hovered ? btnColorMouseOver : btnColorDefault)
    }
}