【Qt】QWidget的styleSheet属性

Yui_

发布于 2025-03-24 11:00:43

7200

代码可运行

文章被收录于专栏：Yui编程知识Yui编程知识

运行总次数：0

代码可运行

前言

style?好像前端的style标签了其实Qt也是又CSS(Cascding Style Sheets-层叠样式表)的，CSS本身是网页前端技术，主要就是用来描述界面的样式。所谓的样式，包括但不限于大小，位置，颜色，间距，字体，背景，边框等等。在我们平时看到的网页，就会用到大量的CSS。那么和Qt有什么关系呢？ Qt作为GUI开发，其实和网页前端有很多异曲同工之处，所以呢，Qt也引入了对于CSS的支持~ 但是CSS中可以设置的样式属性非常多，基于这些属性Qt只能支持其中的一部分，因此可以称为QSS。本文仅为styleSheet属性的简单介绍，后续可能会继续详细的介绍~

1. styleSheet属性

双击fromfile的ui文件拖动一个QLabel控件到中间界面：

然后开始查看右边对象对象栏，右击label，点击改变样式表

你可以看到这样的窗口：

然后我们设置字体为宋体，字体大小为30像素，背景为蓝色。

此处的语法格式同CSS，使用键值对的方式设置样式，其中键和值之间使用:，键值之间使用;分割。注意：Qt Designer只能对样式的基本格式进行检验，不能检查出哪些样式不被Qt支持，比如text-align: center这样的文本居中操作就无法支持~ 想要知道QSS支持哪些属性，打开Qt的官方文档搜索Qt Style Sheet

如果你像要学习一些前端的知识可以看我的前端专栏~前端_Yui_的博客-CSDN博客

2. 利用styleSheet属性实现简单的日夜模式切换

在绝大部分的软件都是支持日夜模式切换的，比如我现在正在使用的obsidian中就有深色和浅色的选择：

在编写代码前，我先告诉你一些颜色的16进制表示：

#333是深色
#fff是纯白色
#000是纯黑色下面开始编写第一版的代码：这是ui文件，还有文本框的内容是龙族3中我非常喜欢的一章《迎着阳光盛大逃亡》中路明非带着绘梨衣去梅津寺町在玩耍了一天后中的对话，这也是路明非和绘梨衣的最后一次见面。

#include "widget.h"
#include "ui_widget.h"

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

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


void Widget::on_pushButton_clicked()
{
    //切换深色模式
    this->setStyleSheet("background-color:#333");

    ui->textEdit->setStyleSheet("background-color:#333;color:#fff;");
    ui->pushButton->setStyleSheet("color:#fff");
    ui->pushButton_2->setStyleSheet("color:#fff");
}

void Widget::on_pushButton_2_clicked()
{
    //切换浅色模式
    this->setStyleSheet("background-color:#fff");

    ui->textEdit->setStyleSheet("background-color:#fff;color:#333;");
    ui->pushButton->setStyleSheet("color:#333");
    ui->pushButton_2->setStyleSheet("color:#333");
}

来看看效果吧~

有点奇怪的是，在切换深色模式前的的颜色并不是纯白，所以我们还要对浅色模式进行修改。使用取色器得知，原本的颜色的16进制为#f0f0f0 修改浅色模式代码

void Widget::on_pushButton_2_clicked()
{
    //切换浅色模式
    this->setStyleSheet("background-color:#f0f0f0");

    ui->textEdit->setStyleSheet("background-color:#fff;color:#333;");
    ui->pushButton->setStyleSheet("color:#333");
    ui->pushButton_2->setStyleSheet("color:#333");
}

查看效果：

2.1 知识补充-计算机中的颜色表示

众所周知，显示屏会显示颜色的都是由RGB三原色组成的，由它们构成我们看到的所有颜色。如果你不了解，接下来让我们认识RGB 什么是RGB 我们的显示屏是由非常多的像素组成的，每个像素可以被视为一个极小的点，这个点能反映一个具体的颜色。我们使用R(red),G(green),B(blue)的方式来表示颜色，这三种颜色按照不同的比例搭配们就可以混合出各种颜色，使用称为3原色。计算机中针对R\G\B三个的分量，分别使用一个字节表示（8个比特位，表示的范围是0-255，16进制表示00-FF）. 数值越大，表示该分量的颜色就越浓，255，255，255表示白色，0，0，0表示黑色。