【Qt】QSS
一、QSS
1. QSS
对于 QSS 来说, 基本的语法结构非常简单：
选择器 {
属性名: 属性值;
}其中:
- 选择器 描述了 “哪个 widget 要应⽤样式规则”.
- 属性 则是⼀个键值对, 属性名表⽰要设置哪种样式, 属性值表⽰了设置的样式的值.
例如：
QPushButton { color: red; }上述代码的含义表示，针对界⾯上所有的 QPushButton , 都把⽂本颜⾊设置为红色。
代码示例: QSS 基本使用：
1 Widget::Widget(QWidget *parent)
2 : QWidget(parent)
3 , ui(new Ui::Widget)
4 {
5 ui->setupUi(this);
6
7 ui->pushButton->setStyleSheet("QPushButton { color: red; }");
8 }2. QSS 设置方式
（1）指定控件样式设置
QWidget 中包含了 setStyleSheet ⽅法, 可以直接设置样式。上述代码我们已经演⽰了上述设置⽅式。
另⼀⽅⾯, 给指定控件设置样式之后, 该控件的⼦元素也会受到影响。
代码⽰例: ⼦元素受到影响
在界⾯上创建⼀个按钮
修改 widget.cpp, 这次我们不再给按钮设置样式, ⽽是给 Widget 设置样式 (Widget 是 QPushButton 的⽗控件).
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 给 Widget 本⾝设置样式.
this->setStyleSheet("QWidget { color: red;} ");
}运⾏程序, 可以看到样式对于⼦控件按钮同样会⽣效.
（2）全局样式设置
还可以通过 QApplication 的 setStyleSheet ⽅法设置整个程序的全局样式. 全局样式优点:
- 使同⼀个样式针对多个控件⽣效, 代码更简洁.
- 所有控件样式内聚在⼀起, 便于维护和问题排查
代码⽰例1: 使⽤全局样式
在界⾯上创建三个按钮.
编辑 main.cpp, 设置全局样式
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// 设置全局样式
a.setStyleSheet("QPushButton { color: red; }");
Widget w;
w.show();
return a.exec();
}运⾏程序, 可以看到此时三个按钮的颜⾊都设置为红⾊了.
代码⽰例2: 样式的层叠特性
如果通过全局样式给某个控件设置了属性1, 通过指定控件样式给控件设置属性2, 那么这两个属性都会产⽣作⽤.
在界⾯上创建两个按钮
编写 main.cpp, 设置全局样式, 把按钮⽂本设置为红⾊
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// 设置全局样式
a.setStyleSheet("QPushButton { color: red; }");
Widget w;
w.show();
return a.exec();
}编写 widget.cpp, 给第⼀个按钮设置字体⼤⼩.
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 设置指定控件样式
ui->pushButton->setStyleSheet("QPushButton { font-size: 50px} ");
}运⾏程序, 可以看到, 对于第⼀个按钮来说, 同时具备了颜⾊和字体⼤⼩样式. ⽽第⼆个按钮只有颜⾊样式.说明针对第⼀个按钮, 两种设置⽅式设置的样式, 叠加起来了.
注意：如果全局样式, 和指定控件样式冲突, 则指定控件样式优先展⽰.
（3）从文件加载样式表
上述代码都是把样式通过硬编码的⽅式设置的. 这样使 QSS 代码和 C++ 代码耦合在⼀起了, 并不⽅便代码的维护.
因此更好的做法是把样式放到单独的⽂件中, 然后通过读取⽂件的⽅式来加载样式.
代码⽰例: 从⽂件加载全局样式：
- 在界⾯上创建⼀个按钮
- 创建 resource.qrc ⽂件, 并设定前缀为 / .
- 创建 style.qss ⽂件, 并添加到 resource.qrc 中.
- style.qss 是需要程序运⾏时加载的. 为了规避绝对路径的问题, 仍然使⽤ qrc 的⽅式来组 织 (即把资源⽂件内容打包到 cpp 代码中).
- Qt Creator 没有提供创建 qss ⽂件的选项. 咱们直接 右键 -> 新建⽂件 -> ⼿动设置⽂件扩展名 为 qss 即可.
使⽤ Qt Creator 打开 style.qss , 编写内容：
QPushButton {
color: red;
}修改 main.cpp, 新增⼀个函数⽤来加载样式
QString loadQSS() {
QFile file(":/style.qss");
// 打开⽂件
file.open(QFile::ReadOnly);
// 读取⽂件内容. 虽然 readAll 返回的是 QByteArray, 但是 QString 提供了QByteArray 版本的构造函数.
QString style = file.readAll();
// 关闭⽂件
file.close();
return style;
}修改 main.cpp, 在 main 函数中调⽤上述函数, 并设置样式.
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// 调⽤上述函数加载样式
const QString& style = loadQSS();
a.setStyleSheet(style);
Widget w;
w.show();
return a.exec();
}运⾏程序, 可以看到样式已经⽣效了.
（4）使用 Qt Designer 编辑样式
QSS 也可以通过 Qt Designer 直接编辑, 从⽽起到实时预览的效果. 同时也能避免 C++ 和 QSS 代码的耦合.
代码⽰例: 使⽤ Qt Designer 编辑样式
- 在界⾯上创建⼀个按钮
- 右键按钮, 选择 “改变样式表”
- 在弹出的样式表编辑器中, 可以直接填写样式. 填写完毕, 点击 OK 即可.
- 此时 Qt Designer 的预览界⾯就会实时显⽰出样式的变化.
3. 选择器
（1）选择器介绍
代码示例：使⽤ id 选择器
- 在界⾯上创建 3 个按钮, objectName 为 pushButton , pushButton_2 , pushButton_3
- 编写 main.cpp, 设置全局样式
先通过 QPushButton 设置所有的按钮为⻩⾊.
再通过 #pushButton 和 #pushButton_2 分别设置这两个按钮为红⾊和绿⾊.
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// 设置全局样式
QString style = "";
style += "QPushButton { color: yellow; }";
style += "#pushButton { color: red; }";
style += "#pushButton_2 { color: green; }";
a.setStyleSheet(style);
Widget w;
w.show();
return a.exec();
}- 执⾏程序, 观察效果
（2）子控件选择器 (Sub-Controls)
有些控件内部包含了多个 “⼦控件” . ⽐如 QComboBox 的下拉后的⾯板, ⽐如 QSpinBox 的上下按钮等.
可以通过⼦控件选择器 :: , 针对上述⼦控件进⾏样式设置
代码⽰例: 修改进度条的颜⾊
- 在界⾯上创建⼀个进度条.
- 在 Qt Designer 右侧的属性编辑器中, 找到 QWidget 的 styleSheet 属性.
编辑如下内容:
其中的 chunk 是选中进度条中的每个 “块” . 使⽤ QProgressBar::text 则可以选中⽂本.
QProgressBar::chunk {background-color: #FF0000;}同时把 QProcessBar 的 alignment 属性设置为垂直⽔平居中.
- 此处如果不设置 alignment , 进度条中的数字会跑到左上⻆. 这个怀疑是 Qt 本⾝的 bug, 暂时只能先使⽤ alignment 来⼿动调整下.
- 执⾏程序, 可以看到如下效果. 我们就得到了⼀个红⾊的进度条.
通过上述⽅式, 也可以修改⽂字的颜⾊, 字体⼤⼩等样式。
（3）伪类选择器 (Pseudo-States)
伪类选择器, 是根据控件所处的某个状态被选择的. 例如按钮被按下, 输⼊框获取到焦点, ⿏标移动到某个控件上等.
- 当状态具备时, 控件被选中, 样式⽣效
- 当状态不具备时, 控件不被选中, 样式失效
使⽤ : 的⽅式定义伪类选择器
常⽤的伪类选择器：
这些状态可以使⽤ ! 来取反. ⽐如 :!hover 就是⿏标离开控件时, :!pressed 就是⿏标松开时, 等等.
代码⽰例: 设置按钮的伪类样式.
在界⾯上创建⼀个按钮
编写 main.cpp, 创建全局样式
int main(int argc, char *argv[])
{
QApplication a(*argc*, argv);
QString style = "";
style += "QPushButton { color: red; }";
style += "QPushButton:hover { color: green; }";
style += "QPushButton:pressed { color: blue; }";
a.setStyleSheet(style);
Widget w;
w.show();
return a.exec();
}运⾏程序, 可以看到, 默认情况下按钮⽂字是红⾊, ⿏标移动上去是绿⾊, ⿏标按下按钮是蓝⾊.
4. 样式属性
QSS 中的样式属性⾮常多, 不需要都记住. 核⼼原则还是⽤到了就去查.
⼤部分的属性和 CSS 是⾮常相似的.
- ⽂档的 Qt Style Sheets Reference 章节详细介绍了哪些控件可以设置属性, 每个控 件都能设置哪些属性等.
盒模型 (Box Model)
在⽂档的 Customizing Qt Widgets Using Style Sheets 的 The Box Model 章节介绍了盒模型.
⼀个遵守盒模型的控件, 由上述⼏个部分构成.
- Content 矩形区域: 存放控件内容. ⽐如包含的⽂本/图标等.
- Border 矩形区域: 控件的边框.
- Padding 矩形区域: 内边距. 边框和内容之间的距离.
- Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离
默认情况下, 外边距, 内边距, 边框宽度都是 0
可以通过⼀些 QSS 属性来设置上述的边距和边框的样式.
代码⽰例: 设置边框和内边距
在界⾯上创建⼀个 label
修改 main.cpp, 设置全局样式
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
a.setStyleSheet("QLabel { border: 5px solid red; padding-left: 10px; }");
Widget w;
w.show();
return a.exec();
}- border: 5px solid red 相当于 border-style: solid; border-width: 5px
- border-color: red; 三个属性的简写形式
- padding-left: 10px; 是给左侧设置内边距
- 运⾏程序, 可以看到样式发⽣了变化
代码⽰例: 设置外边距
为了⽅便确定控件位置, 演⽰外边距效果, 我们使⽤代码创建⼀个按钮
修改 widget.cpp, 创建按钮, 并设置样式
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QPushButton* btn = new QPushButton(this);
btn->setGeometry(0, 0, 100, 100);
btn->setText("hello");
btn->setStyleSheet("QPushButton { border: 5px solid red; margin: 20px; }");
const QRect& rect = btn->geometry();
qDebug() << rect;
}运⾏程序, 可以看到, 当前按钮的边框被外边距挤的缩⼩了. 但是获取到的按钮的 Geometry 是不变的.
5. 控件样式示例
（1）按钮
代码⽰例: ⾃定义按钮
- 界⾯上创建⼀个按钮
右键 -> 改变样式表, 使⽤ Qt Designer 设置样式
QPushButton {
font-size: 20px;
border: 2px solid #8f8f91;
border-radius: 15px;
background-color: #dadbde;
}
QPushButton:pressed {
background-color: #f6f7fa;
}执⾏程序, 可以看到效果
（2）复选框
代码⽰例: ⾃定义复选框
- 创建⼀个 resource.qrc ⽂件, 并导⼊以下图⽚
- 使⽤⿊⾊作为默认形态.
- 使⽤蓝⾊作为 hover 形态.
- 使⽤红⾊作为 pressed 形态.
创建⼀个复选框
QCheckBox {
font-size : 20px;
}
QCheckBox::indicator {
width: 20px;
height: 20px;
}
QCheckBox::indicator : unchecked {
image: url(:/checkbox - unchecked.png);
}
QCheckBox::indicator : unchecked : hover {
image:url(:/checkbox - unchecked_hover.png);
}
QCheckBox::indicator:unchecked:pressed {
image: url(:/checkbox-unchecked_pressed.png);
}
QCheckBox::indicator:checked {
image: url(:/checkbox-checked.png);
}
QCheckBox::indicator:checked:hover {
image: url(:/checkbox-checked_hover.png);
}
QCheckBox::indicator:checked:pressed {
image: url(:/checkbox-checked_pressed.png);
}运⾏程序, 可以看到此时的复选框就变的丰富起来了
（3）单选框
参考复选框，用法基本一样。
（4）输入框
代码⽰例: ⾃定义单⾏编辑框
- 在界⾯上创建⼀个单⾏编辑框
在 Qt Designer 中编写样式.
QLineEdit {
border-width: 1px;
border-radius: 10px;
border-color: rgb(58, 58, 58);
border-style: inset;
padding: 0 8px;
color: rgb(255, 255, 255);
background:rgb(100, 100, 100);
selection-background-color: rgb(187, 187, 187);
selection-color: rgb(60, 63, 65);
}执⾏程序观察效果.
（5）列表
代码⽰例: ⾃定义列表框
- 在界⾯上创建⼀个 ListView
编写代码
QListView::item:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}
QListView::item:selected {
border: 1px solid #6a6ea9;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9);
}执⾏程序, 观察效果
（6）菜单栏
代码⽰例: ⾃定义菜单栏
- 创建菜单栏
编写样式
QMenuBar {
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 lightgray, stop:1 darkgray);
spacing: 3px; /* spacing between menu bar items */
}
QMenuBar::item {
padding: 1px 4px;
background: transparent;
border-radius: 4px;
}
QMenuBar::item:selected { /* when selected using mouse or keyboard */
background: #a8a8a8;
}
QMenuBar::item:pressed {
background: #888888;
}
QMenu {
background-color: white;
margin: 0 2px; /* some spacing around the menu */
}
QMenu::item {
padding: 2px 25px 2px 20px;
border: 3px solid transparent; /* reserve space for selection border */
}
QMenu::item:selected {
border-color: darkblue;
background: rgba(100, 100, 100, 150);
}
QMenu::separator {
height: 2px;
background: lightblue;
margin-left: 10px;
margin-right: 5px;
}执⾏程序, 观察效果
（7）登录界面
基于上述学习过的 QSS 样式, 制作⼀个美化版本的登录界⾯
- 在界⾯上创建元素
- 使⽤布局管理器, 把上述元素包裹⼀下.
- 使⽤ QVBoxLayout 来管理上述控件.
- 两个输⼊框和按钮的 minimumHeight 均设置为 50. (元素在布局管理器中⽆法直接设置 width 和 height, 使⽤ minimumWidth 和 minimumHeight 代替, 此时垂直⽅向的 sizePolicy 要设为 fixed).
- 右键 QCheckBox , 选择 Layout Alignment 可以设置 checkbox 的对⻬⽅式(左对⻬, 居中对⻬, 右对⻬).
- 设置背景图⽚.
把上述控件添加⼀个⽗元素 QFrame, 并设置 QFrame 和 窗⼝⼀样⼤.
- 顶层窗⼝的 QWidget ⽆法设置背景图⽚. 因此我们需要再套上⼀层 QFrame. 背景图⽚就设置到 QFrame 上即可.
创建 resource.qrc, 并导⼊图片，编写 QSS 样式.
使⽤ border-image 设置背景图⽚, ⽽不是 background-image . 主要是因为 border-image 是可以⾃动缩放的. 这⼀点在窗⼝⼤⼩发⽣改变时是⾮常有意义的.
QFrame {
border-image: url(:/picture.jpg);
}- 设置输⼊框样式
编写 QSS 代码
QLineEdit {
color: #8d98a1;
background-color: #405361;
padding: 0 5px;
font-size: 20px;
border-style: none;
border-radius: 10px;
}- 设置 checkbox 样式
背景⾊使⽤ transparent 表⽰完全透明 (应⽤⽗元素的背景).
QCheckBox {
color: white;
background-color: transparent;
}设置按钮样式
QPushButton {
font-size: 20px;
color: white;
background-color: #555;
border-style: outset;
border-radius: 10px;
}
QPushButton:pressed {
color: black;
background-color: #ced1db;
border-style: inset;
}最终完整样式代码. 这些代码设置到 QFrame 的属性中即可。通常我们建议把样式代码集中放置, ⽅便调整和排查
QFrame {
border-image: url(:/cat.jpg);
}
QLineEdit {
color: #8d98a1;
background-color: #405361;
padding: 0 5px;
font-size: 20px;
border-style: none;
border-radius: 10px;
}
QCheckBox {
color: white;
background-color: transparent;
}
QPushButton {
font-size: 20px;
color: white;
background-color: #555;
border-style: outset;
border-radius: 10px;
}
QPushButton:pressed {
color: black;
background-color: #ced1db;
border-style: inset;
}二、绘图
1. 基本概念
虽然 Qt 已经内置了很多的控件, 但是不能保证现有控件就可以应对所有场景。很多时候我们需要更强的 “⾃定制” 能⼒。
Qt 提供了画图相关的 API, 可以允许我们在窗⼝上绘制任意的图形形状, 来完成更复杂的界⾯设计.
绘图 API 核⼼类
绘图 API 的使⽤, ⼀般不会在 QWidget 的构造函数中使⽤, ⽽是要放到 paintEvent 事件中.
因此, 如果把绘图 api 放到构造函数中调⽤, 那么⼀旦出现上述的情况, 界⾯的绘制效果就⽆法确保符合预期了.
2. 绘制各种形状
（1）绘制线段
void drawLine(const QPoint &p1, const QPoint &p2);
参数：
p1：绘制起点坐标
p2：绘制终点坐标1、在 “widget.h” 头⽂件中声明绘图事件
2、在 “widget.cpp” ⽂件中重写 paintEvent() ⽅法
实现效果如下：
（2）绘制矩形
void QPainter::drawRect(int x, int y, int width, int height)；
参数：
x：窗⼝横坐标；
y：窗⼝纵坐标；
width：所绘制矩形的宽度；
height：所绘制矩形的⾼度；
（3）绘制圆形
void QPainter::drawEllipse(const QPoint ¢er, int rx, int ry)
参数：
center：中⼼点坐标
rx：横坐标
ry：纵坐标
实现效果：
（4）设置画笔
QPainter 在绘制时，是有⼀个默认的画笔的。在使⽤时也可以⾃定义画笔。在 Qt 中，QPen类中定义了 QPainter 应该如何绘制形状、线条和轮廓。同时通过 QPen类 可以设置画笔的线宽、颜⾊、样式、画刷等。
画笔的颜⾊可以在实例化画笔对象时进⾏设置，画笔的宽度是通过 setWidth() ⽅法进⾏设置，画笔的风格是通过setStyle(）⽅法进⾏设置，设置画刷主要是通过 setBrush() ⽅法。
- 设置画笔颜⾊：QPen::QPen(const QColor &color) 画笔的颜⾊主要是通过 QColor 类设置；
- 设置画笔宽度：void QPen::setWidth(int width)
- 设置画笔⻛格：void QPen::setStyle(Qt::PenStyle style)
画笔的⻛格有：
⽰例：画笔的使⽤
实现效果如下：
腾讯云开发者
