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

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.cpp

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

两个输入框的placeholderText改为请输入用户名，请输入密码，密码那个框的echoMode改为Password。

结束。