How to set a custom widget's background color

问题:

I have a custom widget whose parent is yet another custom widget. I am able to set the background color of the parent custom widget using QPalette and it works fine. But I am unable to set the child custom widget's border color using both QPalette and stylesheet.

This is how I set my parent custom widget's background color:

QPalette pal = parentCustomWidget->palette();
QColor color = {226, 208, 208};
pal.setColor (QPalette::Background, color);
parentCustomWidget->setAutoFillBackground (true);
parentCustomWidget->setPalette (pal);
parentCustomWidget->show();

I referred several SO posts/answers for setting background color to custom widget, but I am unable to set it. This is how I set my childCustomWidget's color:

Approach1:

QPalette pal = childCustomWidget->palette();
QColor color = {204, 231, 47};
pal.setColor (QPalette::Background, color);
childCustomWidget->setAutoFillBackground (true);
childCustomWidget->setPalette (pal);

Approach2:

childCustomWidget->setStyleSheet ("*{border-width:" +
    BorderThickness +
    ";border-style:solid;border-color:" +
    hexColorCode + " ;color:white;}");

Note: I have commented out the paintEvent virtual function.

I have gone through this link: How to Change the Background Color of QWidget and have incorporated changes like given but im unable to set color to childCustomWidget.

My custom widgets with the above approaches look like this:

Here orange is the parent's BG color which I am able to set. The grey colored one seems to be the default color for the child widget.

回答1:

Solution

For Approach2 to work, i.e. for your custom widget to respect the stylesheet, the Qt::WA_StyledBackground attribute should be set to true, as it:

Indicates the widget should be drawn using a styled background.

Example

Here is a minimal example I have prepared for you in order to demonstrate a possible implementation of the suggested solution:

class ParentWidget : public QWidget
{
    Q_OBJECT
public:
    explicit ParentWidget(QWidget *parent = nullptr) : QWidget(parent) {}
};

class ChildWidget : public QWidget
{
    Q_OBJECT
public:
    explicit ChildWidget(QWidget *parent = nullptr) : QWidget(parent) {}
};

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = 0) :
           QMainWindow(parent)
       {
           auto *pWidget = new ParentWidget(this);
           auto *l = new QVBoxLayout(pWidget);
           auto *cWidget = new ChildWidget(pWidget);
           QString BorderThickness("2");
           QString hexColorCode("#FF00FF");

           l->addWidget(cWidget);
           l->setContentsMargins(25, 25, 25, 25);

           QPalette pal(pWidget->palette());
           QColor color(226, 208, 208);
           pal.setColor (QPalette::Background, color);
           pWidget->setAutoFillBackground (true);
           pWidget->setPalette (pal);

           cWidget->setAttribute(Qt::WA_StyledBackground, true);
           cWidget->setStyleSheet("ChildWidget { border: " + BorderThickness + " solid " +
                                  hexColorCode + ";"
                                                 "background-color: rgb(204, 231, 47);"
                                                 "color: white; }");

           setCentralWidget(pWidget);
           resize (400, 400);
       }
};

Result

As it is written, this example produces the following result:

回答2:

Qt docs about palette: Warning: Do not use this function in conjunction with Qt Style Sheets. When using style sheets, the palette of a widget can be customized using the "color", "background-color", "selection-color", "selection-background-color" and "alternate-background-color".

http://doc.qt.io/qt-5/qwidget.html#palette-prop

Qt docs about autoFillBackground: Warning: Use this property with caution in conjunction with Qt Style Sheets. When a widget has a style sheet with a valid background or a border-image, this property is automatically disabled.

http://doc.qt.io/qt-5/qwidget.html#autoFillBackground-prop