【QT】QT界面的美容院 -- QSS-EW帮帮网

一、背景介绍

🔥 在网页前端开发领域中，CSS 是一个至关重要的部分，描述了一个网页的 “样式”，从而起到对网页美化的作用。

所谓样式，包括不限于大小、位置、颜色、背景、间距、字体等等。
现在的网页很难找到没有 CSS 的，可以说让 “界面好看” 是一个刚需。
对于针对特定专业领域用户的软件产品，界面设计是否重要？
可参考：(9 封私信 / 22 条消息) 对于针对特定专业领域用户的软件产品，界面设计是否重要？ - 知乎

网页开发作为 GUI 的典型代表，也对于其他客户端 GUI 开发产生了影响，Qt 也是其中之一。

Qt 仿照 CSS 的模式，引入了 QSS，来对 Qt 中的控件做出样式上的设定，从而允许我们写出界面更好看的代码。
同样受到 HTML 的影响，Qt 还引入了 QML 来描述界面，甚至还可以直接把一个原生的 html 页面加载到界面上。
当然，由于 Qt 本身的设计理念和网页前端还是存在一定差异的，因此 QSS 中只能支持部分 CSS 属性。整体来说 QSS 要比 CSS 更简单一些。

注意：如果通过 QSS 设置的样式和通过 C++ 代码设置的样式冲突，则 QSS 优先级更高。

二、基本语法

对于 CSS 来说，基本的语法结构非常简单。

QSS 沿用了其设定：

选择器 {
    属性名: 属性值; 
}

其中：

选择器描述了 “哪个 widget 要应用样式规则”
属性则是一个键值对，属性名表示要设置哪种样式，属性值表示了设置的样式的值。

例如：

QPushButton { color: red; }
//或者：
QPushButton {
    color: red;
}

上述代码的含义表示，针对界面上所有的 QPushButton，都把文本颜色设置为红色

编写 QSS 时使用单行和多行的格式均可。

【基本使用】

新建项目，以 Widget 作为基类，构造函数代码如下：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QGridLayout* layout = new QGridLayout();

    QPushButton* button1 = new QPushButton("红色");
    QPushButton* button2 = new QPushButton("无色");

    button1->setStyleSheet("QPushButton{color:red;}");
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);

    this->setLayout(layout);
}

结果如下：

**注意：**上述代码中，只针对这一个按钮通过 setStyleSheet 方法设置的样式，此时这个样式仅针对该按钮生效。如果创建其他按钮，其他按钮不会受到影响。

三、基本语法

1. 指定控件样式设置

QWidget 中包含了 setStyleSheet 方法，可以直接设置样式。

另一方面，给指定控件设置样式之后，该控件的子元素也会受到影响。

【子元素受到影响】

A. 在界面上创建两个按钮和一个单行编辑框

B. 修改 widget.cpp

这次不再给按钮设置样式，而是给 Widget 设置样式（Widget 是 QPushButton 的父控件）

可以看到样式对于 this 的子控件按钮同样会生效，但是必须是和选择器相关的

2. 全局样式设置

可以通过 QApplication 的 setStyleSheet 方法设置整个程序的全局样式。

全局样式优点：

使同一个样式针对多个控件生效，代码更简洁。
把界面上所有控件样式内聚在⼀起，便于维护和问题排查。

3. 样式的层叠特性

如果通过全局样式给某个控件设置了属性 1，通过指定控件样式给控件设置属性 2，那么这两个属性都会产生作用

比如：基于上面全局样式的设计，我们给按钮1 设置字体大小，如下：

可以看到，对于第一个按钮来说，同时具备了颜色和字体大小样式，而第二个按钮只有颜色样式。

说明针对第一个按钮，两种设置方式设置的样式叠加起来了。

形如上述这种属性叠加的效果被称为 “层叠性”

CSS 全称为 Cascading Style Sheets，其中 Cascading 就是 “层叠性” 的意思，QSS 也继承了这样的设定。实际上把 QSS 叫做 QCSS 也许更合适一些。

注意：局部样式无法叠加，除非写到一行中，如下：

4. 样式优先级

如果全局样式和指定控件样式冲突，则指定控件样式优先展示

这里就不做演示了

在 CSS 中也存在类似的优先级规则。通常来说都是 “局部” 优先级高于 “全局” 优先级，相当于全局样式先 “奠定基调”，再通过指定控件样式来 “特事特办”。

实际开发中，可以在全局样式中设置比较通用的样式来统一整个程序的界面风格。
如果需要针对某个控件进行微调，可以使用局部样式来做出调整

5. 从文件加载样式表

上述代码都是把样式通过硬编码的方式设置的，这样使 QSS 代码和 C++ 代码耦合在一起了，并不方便代码的维护。

因此更好的做法是把样式放到单独的文件中，然后通过读取文件的方式来加载样式

操作如下：

A. 在界面上创建一个按钮

B. 创建 resource.qrc 文件（Qt -> Qt Resource File），并设定前缀为 /

C. 创建 style.qss 文件，并添加到 resource.qrc 中

style.qss 是需要程序运行时加载的，为了规避绝对路径的问题，仍然使用 qrc 的方式来组织（即把资源文件内容打包到 cpp 代码中）
Qt Creator 没有提供创建 qss 文件的选项，直接 “右键” -> “新建” -> “文本文档”，手动设置文件扩展名为 qss 即可

使用 Qt Creator 打开 style.qss，编写内容

新增一个函数来加载样式，如下：

理论上来说 Qt 应该要提供直接从文件加载样式表的接口。

类似于 setStyleSheetFromFile(const QString& path) 这种，在内部把读文件操作封好。

6. 使用 Qt Designer 编辑样式表

QSS 也可以通过 Qt Designer 直接编辑，从而起到实时预览的效果

同时也能避免 C++ 和 QSS 代码的耦合

如下：

这种方式设置样式，样式内容会被以 xml 格式记录到 ui 文件中，如下：

同时在控件的 styleSheet 属性中也会体现：

💡 由于设置样式太灵活，有很多地方都能设置，所以当我们发现一个控件的样式不符合预期的时候，要记得排查这几个地方：

全局样式（QAppplication 设置的）

指定控件样式（这个控件是否设置了样式）

指定控件的父控件的样式（可能是从父控件继承过来的）

qss 文件中的样式

ui 文件中的样式

在实际开发中，如果需要设置样式，建议最好统一使用某一种方式来设置。

四、选择器

1. 选择器概况

QSS 的****选择器****支持以下几种：

选择器类型	示例	说明
全局选择器	`*`	选择所有的 widget。
类型选择器 (type selector)	`QPushButton`	选择所有的 QPushButton 和其子类的控件。
类选择器 (class selector)	`.QPushButton`	选择所有的 QPushButton 的控件【不会选择子类】
ID 选择器	`#pushButton_2`	选择 objectName 为 pushButton_2 的控件。
后代选择器	`QDialog QPushButton`	选择 QDialog 的所有后代（子控件、孙子控件等等）中的 QPushButton。
子选择器	`QDialog > QPushButton`	选择 QDialog 的所有子控件中的 QPushButton。
并集选择器	`QPushButton, QLineEdit, QComboBox`	选择 QPushButton, QLineEdit, QComboBox 这三种控件。（即接下来的样式会针对这三种控件都生效）。
属性选择器	`QPushButton[flat="false"]`	选择所有 QPushButton 中，flat 属性为 false 的控件。

总体来说，QSS 选择器的规则和 CSS 选择器基本一致。

【使用类型选择器选中子类控件】

① 在界面上创建一个按钮，修改 main.cpp，设置全局样式

a.setStyleSheet("QWidget{color:red;}");

注意：此处选择器使用的是 QWidget。QPushButton 也是 QWidget 的子类，所以会受到 QWidget 选择器的影响。

可以看到按钮的文本颜色已经是红色了

② 但是 💢如果把上述样式代码修改为下列代码

a.setStyleSheet(".QWidget{color:red;}");

【使用 id 选择器】

在开发中，如果期望不同的控件样式不同，此时就需要使用到 ID 选择器了

① 在界面上创建 3 个按钮，objectName 为 pushButton、pushButton_2、pushButton_3

② 编写 main.cpp，设置全局样式

先通过 QPushButton 设置所有的按钮为红色。
再通过 #pushButton 和 #pushButton_2 分别设置这两个按钮为绿色和黄色。

当某个控件身上，通过类型选择器和 ID 选择器设置了冲突的样式时，ID 选择器样式优先级更高（遵循局部优先）

同理，如果是其他的多种选择器作用同一个控件时出现冲突的样式，也会涉及到优先级问题。Qt 文档上有具体的优先级规则介绍（参见 The Style Sheet Syntax 的 Conflict Resolution 章节）

这里的规则计算起来非常复杂（CSS 中也存在类似的设定）。可以简单的认为，选择器描述的范围越精准，则优先级越高。一般来说，ID 选择器优先级是最高的。

如果属性不冲突，还是会同时生效

【使用并集选择器】

创建三个按钮、一个 label、一个单行输入框，编写 main.cpp，设置全局样式

QString style="QPushButton,QLineEdit,QLabel{color:red;}";
 
a.setStyleSheet(style);

此时就可以看到这三种控件的文字颜色都设置为了红色：

并集选择器是一种很好的代码复用的方式，很多时候我们希望界面上的多个元素风格是统一的，就可以使用并集选择器，把样式属性同时指定给多种控件。

也可以指定 id 选择器：

QString style="#pushButton_2,QLineEdit,QLabel{color:red;}";

2. 子控件选择器（Sub-Controls）

有些控件内部包含了多个 “子控件”，比如 QComboBox 的下拉后的面板，比如 QSpinBox 的上下按钮等。

可以通过 子控件选择器 :: ，针对上述子控件进行样式设置。

哪些控件拥有哪些子控件，参考文档 Qt Style Sheets Reference 中 List of Sub-Controls 章节

【设置下拉框的下拉按钮样式】

① 在界面上创建一个下拉框，并创建几个选项

② 创建 resource.qrc，并导入图片 downPull.png

③ 修改 main.cpp，编写全局样式

使用子控件选择器 QComboBox::down-arrow 选中了 QComboBox 的下拉按钮。
再通过 image 属性设置图片。

QString style="QComboBox::down-arrow{ image:url(:/downPull.png)}";
a.setStyleSheet(style);

结果如下：

3. 伪类选择器（Pseudo-States）

伪类选择器，是根据控件所处的某个状态被选择的。

例如按钮被按下，输入框获取到焦点，鼠标移动到某个控件上等。

当状态具备时，控件被选中，样式生效。

当状态不具备时，控件不被选中，样式失效。

使用 : 的方式定义伪类选择器

常用的伪类选择器：

伪类选择器	说明
:hover	鼠标放到控件上
:pressed	鼠标左键按下时
:focus	获取输入焦点时
:enabled	元素处于可用状态时
:checked	被勾选时
:read-only	元素为只读状态时

这些状态可以使用 ! 来取反，比如 :!hover 就是鼠标离开控件时，:!pressed 就是鼠标松开时，等等。更多伪类选择器的详细情况可以参考 Qt Style Sheets Reference 的 Pseudo-States 章节。

【设置按钮的伪类样式】

在界面上创建一个按钮，编写 main.cpp，创建全局样式

QString style = "QPushButton { color: red; }";
style += "QPushButton:hover { color: green; }";
style += "QPushButton:pressed { color: blue; }";

a.setStyleSheet(style);

运行程序，结果如下：

可以看到默认情况下按钮文字是红色，鼠标移动上去是绿色，鼠标按下按钮是蓝色

上述代码也可以使用事件的方式来实现。

【使用事件方式实现同样效果】

① 创建 MyPushButton 类，继承自 QPushButton

② 把生成代码中的构造函数改成带参数 QWidget* 版本的构造函数（否则无法和 Qt Designer 生成的代码适配），如下：

// mypushbutton.h
#include <QPushButton>
 
class MyPushButton : public QPushButton
{
public:
    MyPushButton(QWidget* parent);
};
 
 
 
// mypushbutton.cpp
#include "mypushbutton.h"
MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{
 
}

③ 在界面上创建按钮，并提升为 MyPushButton 类型

右键按钮，选择 “提升为…”
填写提升的类名和头文件：

提升完毕后，在右侧对象树这里，就可以看到类型的变化。

④ 重写 MyPushButton 的四个事件处理函数

a. 修改 mypushbutton.h

class MyPushButton : public QPushButton
{
public:
    MyPushButton(QWidget* parent);
 
    void mousePressEvent(QMouseEvent* e);
    void mouseReleaseEvent(QMouseEvent* e);
    void enterEvent(QEvent* e);
    void leaveEvent(QEvent* e);
};

b. 修改 mypushbutton.cpp

初始化设为红色
鼠标进入时设为绿色，离开是还原红色
鼠标按下时设为蓝色，松开时还原绿色（松开时鼠标还是在按钮里）

MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{
    this->setStyleSheet("QPushButton { color: red; }");
}
 
void MyPushButton::mousePressEvent(QMouseEvent *e)
{
    this->setStyleSheet("QPushButton { color: blue; }");
}
 
void MyPushButton::mouseReleaseEvent(QMouseEvent *e)
{
    this->setStyleSheet("QPushButton { color: green; }");
}
 
void MyPushButton::enterEvent(QEvent *e)
{
    this->setStyleSheet("QPushButton { color: green; }");
}
 
void MyPushButton::leaveEvent(QEvent *e)
{
    this->setStyleSheet("QPushButton { color: red; }");
}

运行程序可以看到效果和上述案例一致

很明显，实现同样的功能，伪类选择器要比事件的方式简单很多。

但是不能就说事件机制就不好，事件可以完成的功能很多，不仅仅是样式的改变，还可以包含其他业务逻辑，这一点是伪类选择器无法替代的。

五、样式属性

QSS 中的样式属性非常多，大部分的属性和 CSS 是非常相似的。

文档的 Qt Style Sheets Reference 章节详细介绍了哪些控件可以设置属性，每个控件都能设置哪些属性等。

1. 盒模型（Box Model）

这个词主要来自于 CSS

在文档的 Customizing Qt Widgets Using Style Sheets 的 The Box Model 章节介绍了盒模型

⼀个遵守盒模型的控件，由上述几个部分构成

Content 矩形区域：存放控件内容，比如包含的文本 / 图标等。

Border 矩形区域：控件的边框。

Padding 矩形区域：内边距，边框和内容之间的距离。

Margin 矩形区域：外边距，边框到控件 geometry 返回的矩形边界的距离。

默认情况下，外边距、内边距、边框宽度都是 0。

可以通过一些 QSS 属性来设置上述的边距和边框的样式：

QSS 属性	说明
margin	设置四个方向的外边距。复合属性。
padding	设置四个方向的内边距。复合属性。
border-style	设置边框样式
border-width	边框的粗细
border-color	边框的颜色

这里的复合属性：由多个属性构成，margin 可以拆成如下：

margin-left

margin-right

margin-top

margin-bottom

当然实际运用的时候，写 margin: 10px; ==> 表示四个方向都是 10px 的外边距，而写 margin: 10px 20px; 则是上下都是 10px, 左右是 20px， margin: 10px 20px 30px 40px ==> 上右下左(顺时针)

同样 padding 也可以拆成 4 个属性的

【设置边框和内边距】

在界面上创建一个 label，修改 main.cpp, 设置全局样式

QString style = "QLabel{border: 20px solid green; padding-left: 50px}";
a.setStyleSheet(style);

border: 20px solid green 相当于 border-style: solid; border-width: 2px; border-color: green; 三个属性的简写形式。
padding-left: 50px; 是给左侧设置内边距。

结果如下：

【设置外边距】

为了方便确定控件位置，演示外边距效果，使用代码创建⼀个按钮。修改 widget.cpp，创建按钮，并设置样式

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button = new QPushButton(this);
    button->setGeometry(0, 0, 100, 100);
    button->setText("按钮");
    button->setStyleSheet("QPushButton{border: 5px solid red; margin: 20px}");

    qDebug() << button->geometry();
}

运行程序如下：

可以看到，当前按钮的边框被外边距挤的缩小了，但是获取到的按钮的 Geometry 是不变的。

2. 控件样式示例（Box Model）

① 自定义按钮

A. 界面上创建一个按钮

B. 右键 -> 改变样式表，使用 Qt Designer 设置样式

C. 执行程序，点击 “按钮”：

属性	说明
font-size	设置文字大小。
border-radius	设置圆角矩形。数值设置的越大，角就越圆。
background-color	设置背景颜色。

② 自定义复选框

A. 创建一个 resource.qrc 文件，并导入以下图片

使用黑色作为默认形态
使用蓝色作为 hover 形态
使用红色作为 pressed 形态

⚽ 使用阿里矢量图标库，可以下载到上述图片，下载的时候可以手动选择颜色

注意这里的文件命名。

B. 创建一个复选框，并且用样式表来编辑复选框的样式

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

鼠标点击选中，再取消的过程，可以看到此时的复选框就变得丰富起来了：

要点	说明
::indicator	子控件选择器。选中 checkbox 中的对钩部分。
:hover	伪类选择器。选中鼠标移动上去的状态。
:pressed	伪类选择器。选中鼠标按下的状态。
:checked	伪类选择器。选中 checkbox 被选中的状态。
:unchecked	伪类选择器。选中 checkbox 未被选中的状态。
width	设置子控件宽度。对于普通控件无效（普通控件使用 geometry 方式设定尺寸）。
height	设置子控件高度。对于普通控件无效（普通控件使用 geometry 方式设定尺寸）。
image	设置子控件的图片。像 QSpinBox, QComboBox 等可以使用这个属性来设置子控件的图片。

③ 自定义单选框

A. 创建 resource.qrc 文件，并导入以下图片

使用黑色作为默认形态

使用蓝色作为 hover 形态

使用红色作为 pressed 形态

B. 在界面上创建两个单选按钮，并且在 Qt Designer 中编写样式

此处为了让所有 QRadioButton 都能生效，把样式设置在 Widget 上了，并且使用后代选择器选中了 QWidget 里面的 QRadioButton。

 QWidget QRadioButton {
    font-size: 20px;
}
 
QWidget QRadioButton::indicator {
    width: 20px;
    height: 20px;
}
 
QWidget QRadioButton::indicator:unchecked {
    image: url(:/radio-unchecked.png);
}
 
QWidget QRadioButton::indicator:unchecked:hover {
    image: url(:/radio-unchecked_hover.png);
}
 
QWidget QRadioButton::indicator:unchecked:pressed {
    image: url(:/radio-unchecked_pressed.png);
}
 
QWidget QRadioButton::indicator:checked {
    image: url(:/radio-checked.png);
}
 
QWidget QRadioButton::indicator:checked:hover {
    image: url(:/radio-checked_hover.png);
}
 
QWidget QRadioButton::indicator:checked:pressed {
    image: url(:/radio-checked_pressed.png);
}

运行程序，如下：

注意：

QSS 中有些属性，子元素能继承父元素（例如 font-size、color 等），但是也有很多属性是不能继承的。
具体哪些能继承哪些不能继承，规则比较复杂，我们不去具体研究，实践中我们编写更精准的选择器是上策。

④ 自定义输入框

A. 在界面上创建一个单行编辑框，在 Qt Designer 中编写样式

QLineEdit {
 border-width: 2px; 
 border-radius: 20px;
 border-color: rgb(170, 170, 255);
 border-style: solid;
 padding: 0 8px;
 color: rgb(170, 85, 127);
 background:rgb(220, 220, 225);
 selection-background-color: rgb(0, 180, 0);
 selection-color: rgb(180, 0, 0);
}

B. 执行程序，输入文本，并且选中：

属性	说明
border-width	设置边框宽度。
border-radius	设置边框圆角。
border-color	设置边框颜色。
border-style	设置边框风格。
padding	设置内边距。
color	设置文字颜色。
background	设置背景颜色。
selection-background-color	设置选中文字的背景颜色。
selection-color	设置选中文字的文本颜色。

这里 background 其实也可以用 background-color 的

⑤ 自定义列表

A. 在界面上创建一个 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);
}

B. 然后将其变形成为 ListWidget，然后右击进行编辑项目，如下：

C. 执行程序，结果如下：

要点	说明
::item	选中 `QListView` 中的具体条目。
:hover	选中鼠标悬停的条目
:selected	选中某个被选中的条目。
background	设置背景颜色
border	设置边框。
qlineargradient	设置渐变色。

💡 对于渐变色理解

qlineargradient 有 6 个参数。

x1, y1：标注了一个起点
x2, y2：标注了一个终点
这两个点描述了一个 “方向”。

例如

【x1: 0, y1: 0, x2: 0, y2: 1】就是 垂直方向从上向下 进行颜色渐变。
【x1: 0, y1: 0, x2: 1, y2: 0】就是 **水平方向从左向右 **进行颜色渐变。
【x1: 0, y1: 0, x2: 1, y2: 1】就是 从左上往右下 方向进行颜色渐变.
stop0 和 stop1 描述了两个颜色，渐变过程就是从 stop0 往 stop1 进行渐变的。

举个例子：

现在新建一个项目，界面不创建任何任何控件，编写样式，如下：

QWidget {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #fff, stop: 1 #000);
}

修改代码》让其当前按照水平从左往右从白色过渡到黑色

QWidget {
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 #fff, stop: 1 #000);
}

⑥ 自定义菜单栏

A. 创建菜单栏，创建若干菜单项和一个分隔符：

B. 编写样式表，如下：

QMenuBar {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 lightgray, stop:1 darkgray);
    spacing: 3px;
}
 
QMenuBar::item {
    padding: 1px 4px;
    background: transparent;
    border-radius: 4px;
}
 
QMenuBar::item:selected {
    background: #a8a8a8;
}
 
QMenuBar::item:pressed {
    background: #888888;
}
 
QMenu {
    background-color: white;
    margin: 0 2px;
}
 
QMenu::item {
    padding: 2px 25px 2px 20px;
    border: 3px solid transparent;
}
 
QMenu::item:selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}
 
QMenu::separator {
    height: 2px;
    background: lightblue;
    margin-left: 10px;
    margin-right: 5px;
}

执行代码，结果如下：

要点	说明
QMenuBar::item	选中菜单栏中的元素。
QMenuBar::item:selected	选中菜单栏中的被选中的元素。
QMenuBar::item:pressed	选中菜单栏中的鼠标点击的元素。
QMenu::item	选中菜单中的元素
QMenu::item:selected	选中菜单中的被选中的元素。
QMenu::separator	选中菜单中的分割线。

⑦ 登录界面

【基于上述学习的 QSS 样式，来制作一个美化版本的登录界面】

A. 在界面上创建元素，并使用布局管理器把相关元素包裹一下

使用 QVBoxLayout 来管理上述控件。
两个输入框和按钮的 minimumHeight 均设置为 30（元素在布局管理器中无法直接设置 width 和 height，使用 minimumWidth 和 minimumHeight 代替，此时垂直方向的 sizePolicy 要设为 fixed）。

右键 QCheckBox，选择 Layout Alignment 可以设置 checkbox 的对齐方式（左对齐，居中对齐，右对齐）。

设置背景图片

创建 qrc 文件，导入背景图

第一想法：直接给 QWidget 顶层窗口设置背景图，但是 Qt 中存在限制 QWidget的顶层窗口无法设置背景图片
因此可以再套上一层 QFrame，背景图片就设置到 QFrame 上即可。

编写 QFrame 的 QSS 样式：

QFrame{
   border-image:url(:/ship.jpg);
}

使用 border-image 设置背景图片，而不是 background-image。
主要是因为 border-image 是可以自动缩放的，这一点在窗口大小发生改变时是非常有意义的。

效果如下：

编写 CSS 代码（样式表）：

背景色使用 transparent 表示完全透明（应用父元素的背景）。

QFrame{
   border-image:url(:/ship.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: #5555;
    border-style: outset;
    border-radius: 10px;
}
 
QPushButton:pressed {
    color: black;
    background-color: #ced1db;
    border-style: inset;
}

然后还需要对两个输入框的 ui 做点改变，如下：

运行程序，最终效果如下：

最终完整样式代码，这些代码设置到 QFrame 的属性中即可。通常我们建议把样式代码集中放置，方便调整和排查。

六、小结

QSS 本身给 Qt 提供了更丰富的样式设置的能力，但是整体来说 QSS 的功能是不如 CSS 的。

在 CSS 中，整个网页的样式都是 CSS 一手负责，CSS 功能更强大，并且也更可控。
相比之下，Qt 中是以原生 API 为主，来控制控件之间的尺寸、位置等，QSS 只是起到辅助的作用。
而且 Qt 中提供的一些 “组合控件”（像 QComboBox、QSpinBox 等）内部的结构是不透明的，此时进行一些样式设置也会存在一定的局限性。

另外，做出好看的界面，光靠 QSS 是不够的，更重要的是需要专业美工做出设计稿

在这里插入图片描述

【QT】QT界面的美容院 -- QSS

一、背景介绍

二、基本语法

【基本使用】

三、基本语法

1. 指定控件样式设置

2. 全局样式设置

3. 样式的层叠特性

4. 样式优先级

5. 从文件加载样式表

6. 使用 Qt Designer 编辑样式表

四、选择器

1. 选择器概况

【使用类型选择器选中子类控件】

【使用 id 选择器】

【使用并集选择器】

2. 子控件选择器（Sub-Controls）

3. 伪类选择器（Pseudo-States）

五、样式属性

1. 盒模型（Box Model）

2. 控件样式示例（Box Model）

① 自定义按钮

② 自定义复选框

③ 自定义单选框

④ 自定义输入框

⑤ 自定义列表

💡 对于渐变色理解

⑥ 自定义菜单栏

⑦ 登录界面

六、小结

网站公告

今日签到

热门文章

最新发布