自定义控件 UserAvatarWidget 的样式问题及解决方案
场景描述
我开发了一个继承自 QWidget 的自定义控件 UserAvatarWidget，并在 .ui 文件中引入了该控件。引入代码如下：
<item><widget class="UserAvatarWidget" name="userAvatarWidget" native="true"><property name="minimumSize"><size><width>100</width><height>0</height></size></property><property name="maximumSize"><size><width>100</width><height>16777215</height></size></property><property name="styleSheet"><string notr="true">background-color: rgb(255, 228, 253);</string></property></widget>
</item>
在初始状态下，UserAvatarWidget 的背景颜色是 .ui 文件中设置的粉色（#FFE4FD），如图所示：
问题描述
我不想依赖 .ui 中设置的背景颜色
为了给 UserAvatarWidget 添加背景颜色和鼠标悬停时的颜色变化，我尝试使用内联样式来设置这些属性。具体代码如下：
UserAvatarWidget::UserAvatarWidget(QWidget* parent): QWidget(parent) {setObjectName("userAvatarWidget");this->setStyleSheet("#userAvatarWidget { background-color: yellow; } ""#userAvatarWidget:hover { background-color: lightpink; }");setupUI();
}
然而，背景颜色并未显示为内联样式设置的黄色，也不是 .ui 中设置的背景颜色了，并且鼠标悬停效果也未生效，如图所示：
经过调试，我发现添加 setAttribute(Qt::WA_StyledBackground); 后，内联背景颜色和鼠标悬停效果才开始正常工作：
完整代码如下：
UserAvatarWidget::UserAvatarWidget(QWidget* parent): QWidget(parent){setObjectName("userAvatarWidget");this->setStyleSheet("#userAvatarWidget { background-color: yellow; } ""#userAvatarWidget:hover { background-color: lightpink; }");setAttribute(Qt::WA_StyledBackground);setupUI();
}
内联样式虽然解决了，但是我更想使用 .css 样式设置。
.css 尝试
然而，在 .css 文件中添加样式并调用 setAttribute(Qt::WA_StyledBackground); 仍然没有效果：
下面是我没有效果的代码：
UserAvatarWidget::UserAvatarWidget(QWidget* parent): QWidget(parent) {setObjectName("userAvatarWidget");setAttribute(Qt::WA_StyledBackground);setupUI();
}
QWidget#userAvatarWidget{background-color:yellow;
}
QWidget#userAvatarWidget::hover{background-color:lightpink;
}
最终解决方法
经过多次试验，我找到了一种解决方案：移除 .ui 文件中的样式表设置，并在 .css 文件中添加样式，同时确保在构造函数中调用 setAttribute(Qt::WA_StyledBackground);。
修改后的 .ui 文件
<item><widget class="UserAvatarWidget" name="userAvatarWidget" native="true"><property name="minimumSize"><size><width>100</width><height>0</height></size></property><property name="maximumSize"><size><width>100</width><height>16777215</height></size></property></widget>
</item>
.css 文件
QWidget#userAvatarWidget {background-color: yellow;
}QWidget#userAvatarWidget:hover {background-color: lightpink;
}
修改后的 .cpp 文件
UserAvatarWidget::UserAvatarWidget(QWidget* parent): QWidget(parent) {setAttribute(Qt::WA_StyledBackground);setupUI();
}
通过这种方式，UserAvatarWidget 的背景颜色和鼠标悬停效果都按预期工作。
总结
Qt::WA_StyledBackground是关键：对于任何需要从样式表中获取背景绘制的自定义控件，务必设置Qt::WA_StyledBackground。- 样式表优先级：避免在同一控件上同时使用多种样式表设置（如
.ui文件、内联样式和全局.css文件），以防止样式冲突。 - 集中管理样式表：尽量将样式表集中管理，避免在多个地方分散设置样式，减少样式冲突的可能性。
)
