QT设置QWidget背景色踩坑记

最新推荐文章于 2024-08-18 17:32:44 发布

algoruin

最新推荐文章于 2024-08-18 17:32:44 发布

阅读量8k

点赞数 14

分类专栏： UI开发文章标签： qt4

本文链接：https://blog.csdn.net/algoruin/article/details/105230072

版权

这里写自定义目录标题

背景
需求
问题
尝试1
尝试2
尝试3
尝试4
总结

背景

因为项目需要兼容Windows XP系统，一番选型后，采用了QT的QWidget+QSS方式实现UI。自然，设置某个QWidget组件的背景色是一个极为常见的需求。但就在这个及其简单的需求里，作者也踩到坑，费了半天时间，故有此文记录。

需求

以实现一个视频的缩略图按钮为例，具体来说是实现如下效果：
视频缩略图交互稿件

问题

这还不简单？基础功能，预期半小时解决吧，一顿操作猛如虎，得到如下代码：

VideoThumb::VideoThumb(QString text, QWidget *parent) : QWidget(parent)
{
    auto layout = new QVBoxLayout();
    setFixedSize(318,179);
    setStyleSheet("background-color: #333333;");
    setProperty("type", QVariant("video_thumb"));
    _label = new QLabel();
    _label->setText(text);
    _label->setStyleSheet("color:#FFFFFF;font-size:16px;");
    QPixmap play_img(":/images/black_play.png"); #不要吐槽这种非透明抠图，交互稿没人给原Icon
    auto play_label = new QLabel();
    play_label->setPixmap(play_img);

    layout->addSpacing(62);
    layout->addWidget(_label);
    layout->addSpacing(19);
    layout->addWidget(play_label);
    layout->setMargin(0);
    layout->setSpacing(0);
    layout->setAlignment(_label, Qt::AlignHCenter);
    layout->setAlignment(play_label, Qt::AlignHCenter);
    layout->addStretch();
    setLayout(layout);
}

运行一看立刻跪了，只有每个子控件自己占据的地方有背景色。这里为了对比强烈，我整个VideoThumb组件处于一个本身有背景色的组件内（这背景色是不是很熟悉）。