Qt常用控件：QWidget常用属性，控件使能、位置尺寸、顶层窗口标题/图标、透明度、鼠标、字体、鼠标悬停提示、焦点、widget样式（取色器等）

目录

1. 控件概述

2. QWidget 核心属性

2.1 QWidget 常用属性一览

2.2 enabled（控件使能）

2.3 geometry（位置/尺寸）

代码示例：控制按钮的位置

代码示例：一个表白程序

window frame 的影响

2.4 windowTitle（顶层窗口标题）

2.5 windowIcon（顶层窗口图标）

代码示例：设置窗口图标

代码示例：获取当前的工作目录

代码示例：通过 qrc 管理图片作为图标

2.6 windowOpacity（控件透明度）

代码示例：调整窗口透明度

2.7 cursor（鼠标）

代码示例：在 Qt Designer 中设置按钮的光标

代码示例：通过代码设置按钮的光标

代码示例：自定义鼠标图标

2.8 font（字体）

示例：在 Qt Designer 中设置字体属性

代码示例：在代码中设置字体属性。

2.9 toolTip（鼠标悬停提示）

代码示例：设置按钮的 toolTip

2.10 focusPolicy（焦点）

代码示例：理解不同的 focusPolicy

2.11 styleSheet（widget样式）

示例: 设置文本样式

代码示例: 实现切换夜间模式。

取色器

1. 控件概述

Widget 是 Qt 中的核心概念。英文原义是“小部件”，我们此处也把它翻译为“控件”。控件是构成一个图形化界面的基本要素。

像上述示例中的，按钮，列表视图，树形视图，单行输入框，多行输入框，滚动条，下拉框等，都可以称为“控件”。

Qt 作为一个成熟的 GUI 开发框架，内置了大量的常用控件。这一点在 Qt Designer 中就可以看到端倪。并且 Qt 也提供了“自定义控件”的能力，可以让程序猿在现有控件不能满足需求的时候，对现有控件做出扩展，或者手搓出新的控件。

2. QWidget 核心属性

• 在 Qt 中，使用 QWidget 类表示“控件”。像按钮，视图，输入框，滚动条等具体的控件类，都是继承自 QWidget。
• 可以说，QWidget 中就包含了 Qt 整个控件体系中，通用的部分。
• 在 Qt Designer 中，随便拖一个控件过来，选中该控件，即可在右下方看到 QWidget 中的属性
• 这些属性既可以通过 QtDesigner 直接修改，也可以通过代码的方式修改。
• 这些属性的具体含义，在 Qt Assistant 中均有详细介绍。
• 在 Qt Assistant 中搜索 QWidget，即可找到对应的文档说明。（或者在 Qt Creator 代码中，选中 QWidget，按 F1 也可）。

2.1 QWidget 常用属性一览

下列表格列出了 QWidget 中的属性及其作用。

2.2 enabled（控件使能）

• “禁用”：指的是该控件不能接收任何用户的输入事件，并且外观上往往是灰色的。
• 如果一个 widget 被禁用，则该 widget 的子元素也被禁用。

Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QPushButton* btn = new QPushButton(this);
btn->setText("这是个被禁⽤的按钮");
btn->setEnabled(false);
}

2.3 geometry（位置/尺寸）

位置和尺寸。其实是四个属性的统称：

• x 横坐标
• y 纵坐标
• width 宽度
• height 高度

• 实际开发中，并不会直接使用这几个属性，而是通过一系列封装的方法来获取/修改。
• Qt 的坐标系是一个“左手坐标系”，其中坐标系的原点是当前元素的父元素的左上角。

代码示例：控制按钮的位置

在界面中拖五个按钮。五个按钮的 objectName 分别为

• pushButton_target
• pushButton_up
• pushButton_down
• pushButton_left
• pushButton_right

# widget.cpp

void Widget::on_pushButton_up_clicked()
{
QRect rect = ui->pushButton_target->geometry();
rect.setY(rect.y() – 5);
ui->pushButton_target->setGeometry(rect);
}

void Widget::on_pushButton_down_clicked()
{
QRect rect = ui->pushButton_target->geometry();
rect.setY(rect.y() + 5);
ui->pushButton_target->setGeometry(rect);
}

void Widget::on_pushButton_left_clicked()
{
QRect rect = ui->pushButton_target->geometry();
rect.setX(rect.x() – 5);
ui->pushButton_target->setGeometry(rect);
}

void Widget::on_pushButton_right_clicked()
{
QRect rect = ui->pushButton_target->geometry();
rect.setX(rect.x() + 5);
ui->pushButton_target->setGeometry(rect);
}

运行程序，可以看到，按下下方的四个按钮，就会控制 target 的左上角的位置。对应的按钮整个尺寸也会发生改变。

上述代码中我们是直接设置的 QRect 中的 x，y。实际上 QRect 内部是存储了左上和右下两个点的坐标，再通过这两个点的坐标差值计算长宽。单纯修改左上坐标就会引起整个矩形的长宽发生改变。

• 如果想让整个按钮都移动，可以改成下列代码：
• 或者可以使用move实现

void Widget::on_pushButton_up_clicked()
{
QRect rect = ui->pushButton_target->geometry();
ui->pushButton_target->setGeometry(rect.x(), rect.y() – 5, rect.width(),
rect.height());

}

void Widget::on_pushButton_down_clicked()
{
QRect rect = ui->pushButton_target->geometry();
ui->pushButton_target->setGeometry(rect.x(), rect.y() + 5, rect.width(),
rect.height());
}

void Widget::on_pushButton_left_clicked()
{
QRect rect = ui->pushButton_target->geometry();
ui->pushButton_target->setGeometry(rect.x() – 5, rect.y(), rect.width(),
rect.height());
}

void Widget::on_pushButton_right_clicked()
{
QRect rect = ui->pushButton_target->geometry();
ui->pushButton_target->setGeometry(rect.x() + 5, rect.y(), rect.width(),
rect.height());
}

代码示例：一个表白程序

往界面上拖拽两个按钮和一个 Label。PushButton的 objectName 为

• pushButton_accept
• pushButton_reject

# 在 widget.cpp 中添加 slot 函数。
oid Widget::on_pushButton_accept_clicked()
{
ui->label->setText("⼥神快来嘴⼀个! mua~~");
}

void Widget::on_pushButton_reject_pressed()
{
// 获取窗⼝的宽度和⾼度
int width = this->geometry().width();
int height = this->geometry().height();
// 重新⽣成按钮的位置.
int x = rand() % width;
int y = rand() % height;
// 设置新的位置
ui->pushButton_reject->move(x, y);
}

• 运行程序，可以看到，当点击“残忍拒绝”时，按钮就跑了。
• 上述代码使用的是 pressed，鼠标按下就产生信号（不用弹起）。如果使用 mouseMoveEvent，会更狠一些，只要鼠标移动过来，按钮就跑了。对应的代码更麻烦一些（需要自定义类继承自 QPushButton，重写 mouseMoveEvent 方法）。此处暂时不展开。

window frame 的影响

如果 widget 作为一个窗口（带有标题栏，最小化，最大化，关闭按钮），那么在计算尺寸和坐标的时候就有两种算法。包含 window frame 和不包含 window frame。

其中 x()，y()，frameGeometry()，pos()，move() 都是按照包含 window frame 的方式来计算的。

其中 geometry()，width()，height()，rect()，size() 则是按照不包含 window frame 的方式来计算的。

当然，如果一个不是作为窗口的 widget，上述两类方式得到的结果是一致的。

认真观察上面的表格，可以看到，其实这里的 API 有 frameGeometry 和 geometry 两个就足够完成所有的需求了。

为什么要提供这么多功能重复的 API 呢？

这个就涉及到 Qt API 的设计理念了：尽量符合人的直觉。

举个例子，Qt 的 QVector，尾插元素操作，有以下方法：

• push_back
• append
• +=
• <<

上述方法的效果都是等价的。即使不翻阅文档，单纯的凭借直觉就能把代码写对。

# 按钮的slot槽函数中
void Widget::on_pushButton_clicked()
{
QRect rect1 = this->geometry();
QRect rect2 = this->frameGeometry();
qDebug() << rect1;
qDebug() << rect2;
}

# widget构造函数中
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QRect rect1 = this->geometry();
QRect rect2 = this->frameGeometry();
qDebug() << rect1;
qDebug() << rect2;
}

执行程序，可以看到，构造函数中，打印出的 geometry 和 frameGeometry 是相同的。

但是在点击按钮时，打印的 geometry 和 frameGeometry 则存在差异。

原因：

在构造方法中，Widget 刚刚创建出来，还没有加入到对象树中。此时也就不具备 Window frame。

在按钮的 slot 函数中，由于用户点击的时候，对象树已经构造好了，此时 Widget 已经具备了 Window frame，因此在位置和尺寸上均出现了差异。

如果把上述代码修改成打印 pushButton 的 geometry 和 frameGeometry，结果就是完全相同的。因为 pushButton 并非是一个窗口。

2.4 windowTitle（顶层窗口标题）

上述设置操作针对不同的 widget 可能会有不同的行为。如果是顶层 widget（独立窗口），这个操作才会有效。如果是子 widget，这个操作无任何效果。

# widget.cpp
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 设置窗⼝标题
this->setWindowTitle("这是标题");
}

2.5 windowIcon（顶层窗口图标）

同 windowTitle，上述操作仅针对顶层 widget 有效。

代码示例：设置窗口图标

先在 D 盘中放一个图片，名字为 rose.jpg

#include <QIcon>
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 创建图标对象
QIcon icon("d:/rose.jpg");
// 设置图标
this->setWindowIcon(icon);
}

注意：Windows 下路径的分隔符可以使用 / 也可以使用 \\。但是如果在字符串中使用 \\，需要写作转义字符的形式 \\，即 \\\\，因此我们还是更推荐使用 /

与此同时，程序在任务栏中的图标也发生改变。

实际开发中，我们一般不会在代码中通过绝对路径引入图片。因为我们无法保证程序发布后，用户的电脑上也有同样的路径。

如果使用相对路径，则需要确保代码中的相对路径写法和图片实际所在的路径匹配（比如代码中写作 "./image/rose.jpg"，就需要在当前工作目录中创建 image 目录，并把 rose.jpg 放进去）。

• 绝对路径：以盘符（windows）或者以 /（Linux）开头的路径。
• 相对路径：以 .（表示当前路径）或者以 ..（表示当前路径上级路径）开头的路径。其中 . 经常也会省略。相对路径的前提是需要明确“当前工作目录”。

对于 Qt 程序来说，当前工作目录可能是变化的。比如通过 Qt Creator 运行的程序，当前工作目录是项目的构建目录；直接双击 exe 运行，工作目录则是 exe 所在目录。

所谓构建目录，是和 Qt 项目并列的，专门用来放生成的临时文件和最终 exe 的目录。

代码示例：获取当前的工作目录

• 使用 QDir::currentPath() 即可获取到当前工作目录。
• 显示到 label 上

#include <QDir>
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 获取到当前⼯作⽬录
QString currentDir = QDir::currentPath();
// 设置⼯作⽬录到 label 中.
ui->label->setText(currentDir);
}

进入上述构建目录，把里面的 exe 拷贝到其他目录中，比如 D: 中。再次执行程序，可以看到当前工作目录已经发生改变。

要想直接能双击 exe 运行，需要先把 Qt 的路径添加到 path 环境变量中，否则会提示找不到动态库。

注意：上述构建目录，是随时可删除的。比如点击菜单栏中的“构建”->“清理项目”，就会把这个目录中的内容清空掉。

因此如果我们把图片文件放到构建目录中，可能在不小心删除后就丢失了。我们还是希望能够把图片和源代码放到一起，并且使我们的程序无论拷贝到任何位置中都能正确使用图片。

Qt 使用 qrc 机制帮我们自动完成了上述工作，更方便的来管理项目依赖的静态资源。

qrc 文件是一种 XML 格式的资源配置文件，它用 XML 记录硬盘上的文件和对应的随意指定的资源名称。应用程序通过资源名称来访问这些资源。

在 Qt 开发中，可以通过将资源文件添加到项目中来方便地访问和管理这些资源。这些资源文件可以位于 qrc 文件所在目录的同级或其子目录下。

在构建程序的过程中，Qt 会把资源文件的二进制数据转成 cpp 代码，编译到 exe 中。从而使依赖的资源变得“路径无关”。

这种资源管理机制并非 Qt 独有，很多开发框架都有类似的机制。例如 Android 的 Resources 和 AssetManager 也是类似的效果。

代码示例：通过 qrc 管理图片作为图标

• 右键项目，创建一个 Qt Resource File（qrc 文件）文件名随意起（不要带中文）

• 在 qrc 编辑器中，添加前缀。
• 此处我们前缀设置成 / 即可。
• 所谓的前缀，可以理解成“目录”。这个前缀决定了后续我们如何在代码中访问资源。

• 在资源编辑器中，点击 add Files 添加资源文件

• 添加的文件必须是在 qrc 文件的同级目录，或者同级目录的子目录中。因此我们需要把之前 D 盘中的 rose.jpg 复制到上述目录中。

添加完毕后，可以在资源编辑器中看到添加好的文件

# widget.cpp
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 访问到 rose.jpg 资源
QIcon icon(":/rose.jpg");
// 设置图标
this->setWindowIcon(icon);
}

注意上述路径的访问规则。

• 使用 : 作为开头，表示从 qrc 中读取资源。
• / 是上面配置的前缀。
• rose.jpg 是资源的名称。

需要确保代码中编写的路径和添加到 qrc 中资源的路径匹配。否则资源无法被访问（同时也不会有报错提示）

接下来，我们可以进入到项目的构建目录，可以看到，目录中多了一个 qrc_resource.cpp 文件。直接打开这个文件，可以看到类似如下代码：

• 其实就是通过 unsigned char 数组，把 rose.jpg 中的每个字节都记录下来。这些代码会被编译到 exe 中。后续无论 exe 被复制到哪个目录下，都确保能够访问到该图片资源。

static const unsigned char qt_resource_data[] = {
// D:/project/ke/qt/DemoCode/DemoWindowIconQrc/rose.jpg
0x0,0x0,0x33,0x2,
0xff,
0xd8,0xff,0xe0,0x0,0x10,0x4a,0x46,0x49,0x46,0x0,0x1,0x1,0x0,0x0,0x1,0x0,
0x1,0x0,0x0,0xff,0xfe,0x0,0x3b,0x43,0x52,0x45,0x41,0x54,0x4f,0x52,0x3a,0x20,

0x67,0x64,0x2d,0x6a,0x70,0x65,0x67,0x20,0x76,0x31,0x2e,0x30,0x20,0x28,0x75,0x73
,

0x69,0x6e,0x67,0x20,0x49,0x4a,0x47,0x20,0x4a,0x50,0x45,0x47,0x20,0x76,0x36,0x32
,

0x29,0x2c,0x20,0x71,0x75,0x61,0x6c,0x69,0x74,0x79,0x20,0x3d,0x20,0x39,0x35,0xa,
0xff,0xdb,0x0,0x43,0x0,0x2,0x1,0x1,0x1,0x1,0x1,0x2,0x1,0x1,0x1,0x2,
0x2,0x2,0x2,0x2,0x4,0x3,0x2,0x2,0x2,0x2,0x5,0x4,0x4,0x3,0x4,0x6,
0x5,0x6,0x6,0x6,0x5,0x6,0x6,0x6,0x7,0x9,0x8,0x6,0x7,0x9,0x7,0x6,
0x6,0x8,0xb,0x8,0x9,0xa,0xa,0xa,0xa,0xa,0x6,0x8,0xb,0xc,0xb,0xa,
0xc,0x9,0xa,0xa,0xa,0xff,0xdb,0x0,0x43,0x1,0x2,0x2,0x2,0x2,0x2,0x2,
// ………….

上述 qrc 这一套资源管理方案，优点和缺点都很明显。

优点：确保了图片，字体，声音等资源能够真正做到“目录无关”，无论如何都不会出现资源丢失的情况。

缺点：不适合管理体积大的资源。如果资源比较大（比如是几个 MB 的文件），或者资源特别多，生成的最终的 exe 体积就会比较大，程序运行消耗的内存也会增大，程序编译的时间也会显著增加。

2.6 windowOpacity（控件透明度）

代码示例：调整窗口透明度

在界面上拖放两个按钮，分别用来增加不透明度和减少不透明度。objectName 分别为

• pushButton_add
• pushButton_sub

# widget.cpp 中编写槽函数
void Widget::on_pushButton_add_clicked()
{
float opacity = this->windowOpacity();
if (opacity >= 1.0) {
return;
}
qDebug() << opacity;
opacity += 0.1;
this->setWindowOpacity(opacity);
}

void Widget::on_pushButton_sub_clicked()
{
float opacity = this->windowOpacity();
if (opacity <= 0.0) {
return;
}
qDebug() << opacity;
opacity -= 0.1;
this->setWindowOpacity(opacity);
}

同时控制台中也可以看到 opacity 数值的变化。

注意：C++ 中 float 类型遵守 IEEE 754 标准，因此在进行运算的时候会有一定的精度误差，因此 1 – 0.1 的数值并非是 0.9。

2.7 cursor（鼠标）

代码示例：在 Qt Designer 中设置按钮的光标

直接在右侧属性编辑区修改 cursor 属性为“等待”。

代码示例：通过代码设置按钮的光标

• Qt::WaitCursor 就是自带的沙漏形状的光标。

#include <QPushButton>
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 创建按钮
QPushButton* button = new QPushButton(this);
button->resize(100, 50);
button->move(100, 100);
button->setText("这是⼀个按钮");
// 设置按钮的 cursor
button->setCursor(QCursor(Qt::WaitCursor));
}

系统内置的光标形状如下：

• Ctrl + 左键点击 Qt::WaitCursor 跳转到源码即可看到。

enum CursorShape {
ArrowCursor,
UpArrowCursor,
CrossCursor,
WaitCursor,
IBeamCursor,
SizeVerCursor,
SizeHorCursor,
SizeBDiagCursor,
SizeFDiagCursor,
SizeAllCursor,
BlankCursor,
SplitVCursor,
SplitHCursor,
PointingHandCursor,
ForbiddenCursor,
WhatsThisCursor,
BusyCursor,
OpenHandCursor,
ClosedHandCursor,
DragCopyCursor,
DragMoveCursor,
DragLinkCursor,
LastCursor = DragLinkCursor,
BitmapCursor = 24,
CustomCursor = 25
}

代码示例：自定义鼠标图标

Qt 自带的光标形状有限。我们也可以自己找个图片，做成鼠标的光标。

创建 qrc 资源文件，添加前缀 /，并加入 huaji.png。

#include <QPixmap>
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 创建⼀个位图对象, 加载⾃定义光标图⽚
QPixmap pixmap(":/huaji.png");
// 缩放图⽚为 64 * 64 的尺⼨.
pixmap = pixmap.scaled(64, 64);
// 创建 QCursor 对象, 并指定 "热点" 为 (2, 2) 坐标位置.
// 所谓 "热点" 就是⿏标点击时⽣效的位置.
QCursor cursor(pixmap, 2, 2);
// 设置光标
this->setCursor(cursor);
}

2.8 font（字体）

示例：在 Qt Designer 中设置字体属性

在右侧的属性编辑区，设置 label 的 font 相关属性。在这里调整上述属性，可以实时的看到文字的变化。

代码示例：在代码中设置字体属性。

Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 设置 label 的⽂本内容
ui->label->setText("这是⼀段⽂本");

// 创建字体对象
QFont font;
// 设置字体家族
font.setFamily("仿宋");
// 设置字体⼤⼩
font.setPointSize(20);
// 设置字体加粗
font.setBold(true);
// 设置字体倾斜
font.setItalic(true);
// 设置字体下划线
font.setUnderline(true);
// 设置字体删除线
font.setStrikeOut(true);
// 设置字体对象到 label 上
ui->label->setFont(font);
}

实际开发中，字体属性如何选择，是一个“审美问题”，而不是“技术问题”。往往需要有一定的艺术细胞。幸运的是，公司中往往有专业的“美工”/“设计”这样的岗位，去做这方面的工作。咱们程序员只要按照人家给的设计稿，把代码写出来即可。不必过多考虑怎样搭配才好看的问题。

2.9 toolTip（鼠标悬停提示）

toolTip 只是给用户看的。在代码中一般不需要获取到 toolTip。

代码示例：设置按钮的 toolTip

Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
ui->pushButton_yes->setToolTip("这个是 yes 按钮");
ui->pushButton_yes->setToolTipDuration(3000);
ui->pushButton_no->setToolTip("这个是 no 按钮");
ui->pushButton_no->setToolTipDuration(10000);
}

2.10 focusPolicy（焦点）

设置控件获取到焦点的策略。比如某个控件能否用鼠标选中或者能否通过 tab 键选中。

所谓“焦点”，指的就是能选中这个元素。接下来的操作（比如键盘操作），就都是针对该焦点元素进行的了。这个对于输入框，单选框，复选框等控件非常有用的。

这个事情就和 LOL 中，先选中单位，再下达命令是一样的。

Qt::FocusPolicy 是一个枚举类型。取值如下：

• Qt::NoFocus：控件不会接收键盘焦点。
• Qt::TabFocus：控件可以通过 Tab 键接收焦点。
• Qt::ClickFocus：控件在鼠标点击时接收焦点。
• Qt::StrongFocus：控件可以通过 Tab 键和鼠标点击接收焦点（默认值）。
• Qt::WheelFocus：类似于 Qt::StrongFocus，同时控件也通过鼠标滚轮获取到焦点（新增的选项，一般很少使用）。

代码示例：理解不同的 focusPolicy

• 在界面上创建四个单行输入框（Line Edit）

修改四个输入框的 focusPolicy 属性为 Qt::StrongFocus（默认取值，一般不用额外修改）。

此时运行程序，可以看到，使用鼠标单击/tab，就可以移动光标所在输入框。从而接下来的输入就是针对这个获取焦点的输入框展开的了。

• 修改第二个输入框的 focusPolicy 为 Qt::NoFocus，则第二个输入框不会被 tab / 鼠标左键选中。此时这个输入框也就无法输入内容了。
• 修改第二个输入框 focusPolicy 为 Qt::TabFocus，则只能通过 tab 选中，无法通过鼠标选中。
• 修改第二个输入框 focusPolicy 为 Qt::ClickFocus，则只能通过鼠标选中，无法通过 tab 选中。

2.11 styleSheet（widget样式）

通过 CSS 设置 widget 的样式。

CSS (Cascading Style Sheets 层叠样式表) 本身属于网页前端技术。主要就是用来描述界面的 样式。

所谓 "样式"，包括不限于 大小，位置，颜色，间距，字体，背景，边框等。

我们平时看到的丰富多彩的网页，就都会用到大量的 CSS。

Qt 虽然是做 GUI 开发，但实际上和 网页前端 有很多异曲同工之处。因此 Qt 也引入了对于 CSS 的支持。

CSS 中可以设置的样式属性非常多。基于这些属性 Qt 只能支持其中一部分，称为 QSS (Qt Style Sheet)。具体的支持情况可以参考 Qt 文档中 "Qt Style Sheets Reference" 章节。

示例: 设置文本样式

• 创建一个 label 控件
• 编辑右侧的 styleSheet 属性，设置样式

此处的语法格式同 CSS，使用键值对的方式设置样式。其中键和值之间使用 : 分割。键值对之间使用 ; 分割。

另外，Qt Designer 只能对样式的基本格式进行校验，不能检测出哪些样式不被 Qt 支持。比如 textalign: center 这样的文本居中操作，就无法支持。

编辑完成样式之后，可以看到在 Qt Designer 中能够实时预览出效果

代码示例: 实现切换夜间模式。

• 在界面上创建一个多行输入框 (Text Edit) 和两个按钮。
• objectName 分别为 pushButton_light 和 pushButton_dark

编写按钮的 slot 函数。

• #333 是深色，但是没那么黑。
• #fff 是纯白色。
• #000 是纯黑色。

void Widget::on_pushButton_dark_clicked()
{
this->setStyleSheet("background-color: #333");
ui->textEdit->setStyleSheet("background-color: #333; color: #fff;");
ui->pushButton_light->setStyleSheet("color: #fff");
ui->pushButton_dark->setStyleSheet("color: #fff");
}

void Widget::on_pushButton_light_clicked()
{
this->setStyleSheet("background-color: #f3f3f3");
ui->textEdit->setStyleSheet("background-color: #fff; color: #000;");
ui->pushButton_light->setStyleSheet("color: #000");
ui->pushButton_dark->setStyleSheet("color: #000");
}

关于计算机中的颜色表示

计算机中使用 "像素" 表示屏幕上的一个基本单位(也就是一个发亮的光点)。

每个光点都使用三个字节表示颜色，分别是 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 色深等，实际情况会更加复杂。

取色器

QQ 和 微信 的截图自带取色器，截图的时候把鼠标放到对应位置就可以显示色值