How to change the Button's background color? My qt version is 6.4.3

xgj1

I want to change the background color of the button, but the default style can not be overridden. How can I solve this problem

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

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

            background: Rectangle {
                    color: parent.down ? "green" :
                            (parent.hovered ? "blue" : "red")
            }
    }
}

When I move the mouse over the button, the default styles override my custom styles

xgj1

I follow the official document to operate, is my custom button method wrong?

Adithya

@xgj1 You can create a button using rectangle and customize to whatever you want and use mousearea to make the rectangle interactive. check : https://doc.qt.io/qt-6/qml-qtquick-mousearea.html#details

GrecKo

@xgj1 Not all Qt Quick Controls Styles can be customized : https://doc.qt.io/qt-6/qtquickcontrols-customize.html#customization-reference

My guess is that you are under Windows.
The recommended way to use Qt Quick Controls now is not to use dynamic styling but to import a specific style.

So no import QtQuick.Controls, instead use import QtQuick.Controls.Basic (or Fusion, Material, Universal)

mzimmers

@xgj1 what @GrecKo said is probably what is happening to you. You might try adding something like this to your main.cpp:

#include <QSysInfo>
const QString platform = QSysInfo::productType();
QString l_styleName;
l_styleName = (platform == "android")
                          ? "Material"
                          : (platform == "windows")
                                ? "Universal"
                                : "Fusion";
QQuickStyle::setStyle(l_styleName);

Mesrine

@xgj1

In the 'official documentation' they do not use parent they use the component id.
Try replacing parent with button. My thinking is that the parent is not well-defined for the Rectangle .

GrecKo

@Mesrine No.

Mesrine

@GrecKo You are right, the cause is the style he is using has something else on top of the background. So one should use a Basic,... style.
Good to know.
He could select the style also at runtime,
https://doc.qt.io/qt-6/qtquickcontrols-styles.html#using-styles-in-qt-quick-controls
But as you said, compile-time style selection is better for these custom components.
In any case, I do not think parent inside the Rectangle is good.

JoeCFD

@xgj1 I tested your code on Ubuntu 22.04 and got blue color when the mouse hovers over the button. Qt version is 6.7.