Qt QWidget 设置样式表不生效的两种解决方案

漫步繁华街

已于 2023-01-30 16:03:08 修改

阅读量8.1k

点赞数 6

分类专栏： QT 文章标签： qt 开发语言

于 2023-01-30 15:41:57 首次发布

本文链接：https://blog.csdn.net/xiezhongyuan07/article/details/128802153

版权

QT 专栏收录该内容

115 篇文章 66 订阅

订阅专栏

在进行Qt开发的时候，我们往往会遇到这样的场景：

使用Qt Designer 设计界面，但在Qt Designer里设置好样式表，使用快捷键 shift + alt + r 进行预览，样式都是正常的，但程序运行起来，样式就不生效了。

例如设计一个列表，我们将一条数据（一行）设计设计成一个类。鼠标滑过（hover）会有高亮的效果。（免费下载地址https://download.csdn.net/download/xiezhongyuan07/87404417）

1.我们在Qt Designer 创建一个QWidget 的类，ObjectName取名为ItemFom。

我们对ItemForm 设计的样式表如下，设置背景颜色与hover高亮

/*设置背景颜色*/
  QWidget#ItemForm{     
background-color:#2e3449;     
border:none;
 }

/*设置鼠标滑过会高亮*/
  QWidget#ItemForm:hover{     
background-color:#383e52;     
border:none; 
}

2. 我们这时候按下 shift + alt + r 进行预览的效果是正常的，如下：

3. 接着，我们在MainWindow里添加10个ItemForm：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 添加10条item作为测试
    initWidget();
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::initWidget()
{
    // 去除原有的spacer
    ui->mainlayout->removeItem(ui->verticalSpacer);

    // 添加10条item
    for (int i = 0; i < 10; i++) {
        ItemForm *item = new ItemForm(this);
        item->setIndex(i + 1);
        ui->mainlayout->addWidget(item);
    }

    // 还原spacer
    ui->mainlayout->addItem(ui->verticalSpacer);
}

4. 我们运行一下看效果：

把程序运行起来后，发现设计的样式表根本没有效果。

接下来我们给出来两种解决方案：

方案一：重绘子控件背景，在ItemForm 重新实现paintEvent方法

void ItemForm::paintEvent(QPaintEvent *event)
{
    QStylePainter painter(this);
    QStyleOption opt;
    opt.initFrom(this);
    opt.rect = rect();
    painter.drawPrimitive(QStyle::PE_Widget, opt);

    QWidget::paintEvent(event);
}

实现的效果是这样的：

这样就达到了我们的效果。有兴趣的小伙伴可以研究一下QWidget 控件的背景色设置的集中方式。

方式二：在QWidget 的界面上覆盖一层QFrame，样式表针对QFrame 进行设置：

增加了QFrame，并将原有的ItemForm的样式表复制到frame的样式表：

QFrame{     
color:white;     
font-family: Microsoft YaHei;     
font-size:14px;     
background-color:#2e3449; 
}

/*设置背景色*/
  QFrame#frame{     
background-color:#2e3449;     
border:none;
 }

/*设置hover高亮*/
  QFrame#frame:hover{     
background-color:#383e52;     
border:none;
 }

运行程序效果也是可以的