Qt 5.14.2 学习记录 —— 이십이 QSS

文章目录

1、概念
2、基本语法
3、给控件应用QSS设置
4、选择器
- 1、子控件选择器
- 2、伪类选择器
5、样式属性
- box model
6、实例
7、登录界面

1、概念

参考了CSS，都是对界面的样式进行设置，不过功能不如CSS强大。

可通过QSS设置样式，也可通过C++代码设置样式，但QSS使用优先级更高。

2、基本语法

创建QWidget项目

在这里插入图片描述

选择器表明是要对哪个widget，即控件进行设置。属性名属性值这个键值对就是具体的设置

比如

在这里插入图片描述

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet("QPushButton { color: red; }");
}

对一个控件进行设置后，这个控件的子控件也会应用该设置。如果要对界面中每个按钮都设置，那么就可以设置界面的样式

this->setStyleSheet("QPushButton { color: red; }");

这样是对界面中所有按钮进行设置。这是对于界面这个控件的设置，而全局设置在main.cpp中写，方便维护。

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);// a表示整个应用程序a.setStyleSheet("QPushButton { color: red; }");Widget w;w.show();return a.exec();
}

如果全局和控件设置中都写了对按钮的设置，两个设置一样，那么按照控件的设置来显示。

如果两个设置不一样，比如全局设置了颜色，而控件设置中是大小，那么最终的样式就是既有大小又有颜色，这是叠加，即CSS的层叠性，QSS也有这个性质。

3、给控件应用QSS设置

通常来说，QSS代码会放到单独的文件中，除非代码很简单，那可以直接和C++代码放在一起。

通过qrc来管理样式文件。手动创建一个qss空文件，改扩展名为qss即可，然后添加到qrc中，路径设置为根目录。

编写qss文件

QPushButton {color: red;
}

main.cpp中引入qss文件

#include "widget.h"#include <QApplication>
#include <QFile>QString loadQSS()
{QFile file(":/style.qss");file.open(QFile::ReadOnly);QString style = file.readAll();file.close();return style;
}int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(loadQSS());Widget w;w.show();return a.exec();
}

QSS中更方便也实用的方法是在ui文件里写，右键控件，改变样式表。

QPushButton { color: red; }

样式表里这样写就设置上了。不过这样排查起来比较麻烦。

4、选择器

选择所有的widget是*，在之前的按钮选择中，QPushButton就是选择所有的PushButton和其子控件，.QPushButton是选择所有的PushButton，不包含子控件。

在这里插入图片描述

    QString style = "QPushButton { color: red; }";style += "#pushButton_2 { color: green; }";style += "QLineEdit, QLabel { color: orange; }";

id选择器优先级比类型选择器优先级更高。

1、子控件选择器

一个控件有哪些子控件，查看Qt文档

在这里插入图片描述

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

2、伪类选择器

这个选择器选择的是控件的状态

常见伪类选择器

在这里插入图片描述

unchecked则表示未被选中的状态。更多的查看文档。

对一个按钮设置

    QString style = "QPushButton { color: red; }";style += "QPushButton:hover { color: green; }";a.setStyleSheet(style);

当然，这个也可以通过事件来写。

5、样式属性

查看文档，并非所有的控件都可以设置样式。

box model

在这里插入图片描述

图中自外向内分别是外边距，边框，内边距，内容。Qt中每个widget都是矩形。

在这里插入图片描述

复合属性表示，一个属性有多个子属性，比如margin有上下左右四个方向可设置。

6、实例

按钮样式

// 样式表QPushButton {font-size: 20px;border: 2px solid rgb(170, 85, 255);border-radius: 10px; 
}QPushButton:pressed {background-color: rgb(170, 85, 255);
}

复选框样式

在项目的qrc里保存好几个图标

QCheckBox {font-size: 20px;
}QCheckBox::indicator {vidth: 20px;height: 20px;
}QCheckBox::indicator:unchecked {image: 选择添加资源
}QCheckBox::indicator:unchecked:hover {image: 选择添加资源
}QCheckBox::indicator:unchecked:pressed {image: 选择添加资源
}QCheckBox::indicator:checked {image: 选择添加资源
}QCheckBox::indicator:checked:hover {image: 选择添加资源
}QCheckBox::indicator:checked:pressed {image: 选择添加资源
}

单选框同样写法。

输入框样式

在这里插入图片描述

QLineEdit {border-vidth: 2px;border-color: rgb(170, 170, 255);border-style: solid;border-radius: 20px;padding-left: 10px;	color: rgb(85, 0, 255);font-size: 18;selection-color: rgb(255, 170, 255);
}

selection-color设置选中文本时的文字颜色。

列表框样式

QListWidget::item:hover {background-color: rgb(170, 255, 127);
}QListWidget::item:selected {background-color: rgb(170, 85, 255);
}

渐变色需要x1，y1，x2，y2参数坐标，取值都是0或1，比如x1y1都是0，x2y2都是1，那么就是从左上到右下的渐变。

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

菜单样式

创建QMainwindow项目

在这里插入图片描述

QMenuBar {background-color: white;spacing: 3px;
}QMenuBar::item {border-radius: 10px;padding: 3px 10px;background-color: rgb(170, 255, 127);
}QMenuBar::item:selected {background-color: rgb(170, 170, 0);
}QMenu::item {border: 2px solid transparent;padding: 2px 10px;
}QMenu::item:selected {border: 2px solid green;
}QMenu::separator {height: 2px;background-color: orange;margin: 0 4px;
}

QMenuBar::item表示选中菜单栏中的元素；spacing表示菜单之间的间隔；border的transparent能让在选中菜单项时，菜单项的文字不会移动一下，其操作是在没被选中时加了无颜色边框，做到和被选中时同样的设置；separator是在设置分隔线。

7、登录界面

创建一个QWidget界面，放两个Line Edit，Radio Button，PushButton到界面上。通过最左上角的按钮把它们放到一块。

在这里插入图片描述

输入框和按钮的最小高度和最大高度都设为50。

在这里插入图片描述

给上面的控件套一个和窗口大小一样的QFrame控件，在QFrame中设置背景图。设置背景图有background-image，border-image，前者设置固定大小的图片，后者设置的图片可以随控件大小而变化。右击右上角区域的QWidget，改变样式表

QFrame {border-image: url(:/clouds.jpg);
}QLineEdit {color: #8d98a1;background-color: #405361;padding: 0 5px;font-size: 20px;border: none;border-radius: 10px;
}QCheckBox {color: white;font-size: 18px;
}QPushButton {font-size: 20px;color: white;background-color: #555;border-radius: 10px;
}QPushButton:pressed {color: blakc;background-color: rgb(0, 255, 0);
}