QWidget的styleSheet属性
通过CSS设置widget的样式。
样式具体描述了界面具体是什么样子的。
CSS (Cascading Style Sheets 层叠样式表)
在进行网页开发的时候，设置网页样式的方式。本⾝属于⽹⻚前端技术. 主要就是⽤来描述界⾯的样式。CSS已经发展多年，非常成熟，能够提供非常丰富的功能，把网页设置的非常好看。
CSS 中可以设置的样式属性⾮常多. 基于这些属性 Qt 只能⽀持其中⼀部分, 称为 QSS (Qt Style Sheet). 具体的⽀持情况可以参考 Qt ⽂档中 "Qt Style Sheets Reference" 章节.
虽然QSS相比CSS来说，功能上缺失很多，但是依旧可以完成不少的效果。可以通过styleSheet属性初步演示。
例子：设置文本样式
和CSS一样，QSS设置的样式也是键值对的格式：
键和值之间使用 : 分隔
键值对和键值对之间使用 ; 分隔
在Qt的文档中详细介绍QSS相关内容，在Qt文档中搜索Qt Style Sheet即可。
例子：通过代码来设置样式，实现一个“夜间模式”功能。
日间模式：文字是黑色，背景是白色
夜间模式：文字是白色，背景是黑色
在Qt Designer多行输入框和俩个按钮，并修改名字。
【注意】字符串中的单词要注意拼写正确，如果出现拼写错误，不会有任何报错，但是样式不会生效。
#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_light_clicked()
{//设置窗口样式this->setStyleSheet("background-color: white;");//设置输入框的样式ui->plainTextEdit->setStyleSheet("background-color: white; color: black;");//设置按钮样式ui->pushButton_light->setStyleSheet("color: black;");ui->pushButton_dark->setStyleSheet("color: black;");
}
//夜间模式
void Widget::on_pushButton_dark_clicked()
{//设置窗口样式this->setStyleSheet("background-color: black;");//设置输入框样式ui->plainTextEdit->setStyleSheet("background-color: black; color: white;");//设置按钮样式ui->pushButton_light->setStyleSheet("color: white");ui->pushButton_dark->setStyleSheet("color: white;");
}
这里的日间模式与夜间模式与刚出现的默认模式均不相同。
【注意】首先应该清楚，在计算机中如何表示的？
CSS/QSS是可以直接使用单词来设置颜色的：white、black、red、green、blue、yellow。
在计算机中，使用RGB的方式来表示颜色（光的三原色）。
在计算机中，通常会使用一个字节来表示R，一个字节表示G，一个字节表示B。
最终表示一个颜色，就是使用：
（1）rgb（255,0,255）r是255，g是0，b是255
（2）#FF00FF
R是FF红色拉满，G是00绿色没有，B是FF蓝色拉满。
那么Widget的初始背景色的数值是多少呢？
可以通过“取色器”，来获取屏幕上的颜色（Photoshop）
可以通过QQ截图自带的取色器来获取颜色。
关于计算机中的颜⾊表⽰
计算机中使⽤ "像素" 表⽰屏幕上的⼀个基本单位(也就是⼀个发亮的光点).
每个光点都使⽤三个字节表⽰颜⾊, 分别是 R (red), G (green), B (blue) ⼀个字节表⽰ (取值范围是 0-255, 或者 0x00-0xFF).
混合三种不同颜⾊的数值⽐例, 就能搭配出千千万万的颜⾊出来.
- rgb(255, 0, 0) 或者 #FF0000 或者 #F00 表⽰纯红⾊.
- rgb(0, 255, 0) 或者 #00FF00 或者 #0F0 表⽰纯绿⾊.
- rgb(0, 0, 255) 或者 #0000FF 或者 #00F 表⽰纯蓝⾊.
- rgb(255, 255, 255) 或者 #FFFFFF 或者 #FFF 表⽰纯⽩⾊.
- rgb(0, 0, 0) 或者 #000000 或者 #000 表⽰纯⿊⾊.
当然, 上述规则只是针对⼀般的程序⽽⾔是这么设定的. 实际的显⽰器, 可能有 8bit ⾊深或者
10bit ⾊深等, 实际情况会更加复杂
#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_light_clicked()
{//设置窗口样式this->setStyleSheet("background-color: rgb(240, 240, 240);");//设置输入框的样式ui->plainTextEdit->setStyleSheet("background-color: white; color: black;");//设置按钮样式ui->pushButton_light->setStyleSheet("color: black;");ui->pushButton_dark->setStyleSheet("color: black;");
}
//夜间模式
void Widget::on_pushButton_dark_clicked()
{//设置窗口样式this->setStyleSheet("background-color: black;");//设置输入框样式ui->plainTextEdit->setStyleSheet("background-color: black; color: white;");//设置按钮样式ui->pushButton_light->setStyleSheet("color: white");ui->pushButton_dark->setStyleSheet("color: white;");
}
