QT QWidget 背景颜色鼠标hover 背景颜色研究

news2024/12/22 17:25:18

自定义控件 `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 文件），以防止样式冲突。
集中管理样式表：尽量将样式表集中管理，避免在多个地方分散设置样式，减少样式冲突的可能性。