【Qt】QWidget的styleSheet属性

 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;");
}