🏠个人主页：Yui_
🍑操作环境：Qt Creator
🚀所属专栏：Qt
文章目录
- 前言
- [1. styleSheet属性](#1. styleSheet属性)
- [2. 利用styleSheet属性实现简单的日夜模式切换](#2. 利用styleSheet属性实现简单的日夜模式切换)
-
- [2.1 知识补充-计算机中的颜色表示](#2.1 知识补充-计算机中的颜色表示)
- [3. 总结](#3. 总结)
前言
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中我非常喜欢的一章《迎着阳光盛大逃亡》中路明非带着绘梨衣去梅津寺町在玩耍了一天后中的对话，这也是路明非和绘梨衣的最后一次见面。
cpp
#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
修改浅色模式代码
cpp
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表示黑色。
3. 总结
本文我们简单了解了Qt中的styleSheet属性，也就是Qt中的CSS简称QSS，因为CSS具有众多的格式，Qt只采用了其中的一部分功能，即使这样QSS也能帮我们完成不少效果~
最后推荐一个在线调色板网站：在线调色板，调色板工具，颜色选择器
往期文章：
【Qt】初始项目代码解释-CSDN博客
【Qt】HelloWorld程序-CSDN博客
【Qt-信号与槽】connect函数的用法-CSDN博客
【Qt】自定义信号和槽函数-CSDN博客
【Qt】带参数的信号和槽函数-CSDN博客
【Qt】qrc机制介绍_qt qrc是什么-CSDN博客
【Qt】QWidget属性2_qt 设置属性-CSDN博客