【QT】QSS

在这里插入图片描述

个人主页~

一、QSS

QSS可以说是拿了CSS的一部分过来用，是CSS的简化版本

1、基本语法

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

将界面上所有的QPushButton文本颜色都改为红色

QPushButton
{color:red;
}

2、设置方式

（1）指定控件样式设置

在widget.cpp中使用setStyleSheet方法设置样式
这属于是给Widget设置样式，这对于子控件QPushButton等也会生效

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

在这里插入图片描述

（2）全局控件样式设置

在main函数通过a的setStyleSheet设置全局控件样式

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

在这里插入图片描述
这两种方法设置起来的样式使用时会相互叠加，起到共同作用的效果

（3）从文件加载样式表

首先在ui中创建一个pushbutton，然后创建一个resource.qrc文件，新建一个qss文件将文件Add Files到qrc文件当中，然后修改qss文件的内容为

QPushButton
{color:red;
}

在这里插入图片描述
然后修改main函数

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);// 调用上述函数加载样式const QString& style = loadQSS();a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

在这里插入图片描述

（4）使用Qt Designer编辑样式

右键空间->改变样式表，按照上面的基本语法输入就可以了
在这里插入图片描述

3、选择器

选择器	说明
全局选择器	选择所有的widget
类型选择器	选择所有该类型的以及其子类控件
类选择器	选择所有该类型的控件，不选择子类
ID选择器	选择名字为xx的控件
后代选择器	选择某一控件所有后代中的某个控件
子选择器	选择某一个控件所有子控件中的某个控件
并集选择器	选择多种控件
属性选择器	选择某个控件中某一共同属性的控件

下面就是一个类选择器的例子，在前面加一个.
只选择该控件，不选择后代控件
在这里插入图片描述

（1）子控件选择器

添加一个qrc文件，用来放下拉按钮图标，使用子控件QComboBox::down-arrow选中了QComboBox的下拉按钮，通过image属性设置图片，然后将style设置到窗口中
在这里插入图片描述

（2）伪类选择器

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

取反伪类选择器不再单独出一个名字，而是在：后面加！表示取反

伪类选择器

4、样式属性

（1）盒模型

属性	说明
margin	设置四个方向的外边距，复合属性
padding	设置四个方向的内边距，复合属性
border-style	设置边框样式
border-width	边框的粗细
border-color	边框的颜色
border	复合属性，相当于第三条+第四条+第五条

Content：存放控件内容，比如包含的文本和图标等等
Padding：内边距，边框和内容之间的距离
Border：控件的边框
Margin：外边距，边框到控件geometry返回的矩形边界的距离

默认内外边距以及边框宽度都为0

在这里插入图片描述

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");//设置border以及marginbtn->setStyleSheet("QPushButton { border: 5px solid black; margin: 20px; }");//获取按钮位置并打印const QRect& rect = btn->geometry();qDebug() << rect;
}

在这里插入图片描述

从截图中可以看到按钮的位置还是原来的位置，但是当前按钮的边框被外边框挤压的缩小了

5、控件样式

（1）按钮

在这里插入图片描述

border-radius指设置圆角矩形，值越大角越圆

csspushbutton

（2）复选框

先创建一个qrc文件，将我们需要的图片加载进去
在这里插入图片描述
然后编辑它的样式表

QCheckBox {font-size: 20px;
}
//子控件选择器，选中checkbox对钩部分
QCheckBox::indicator {width: 20px;height: 20px;
}QCheckBox::indicator:unchecked {image: url(:/unchecked.png);
}QCheckBox::indicator:unchecked:hover {image: url(:/unchecked_hover.png);
}QCheckBox::indicator:unchecked:pressed {image: url(:/unchecked_pressed.png);
}QCheckBox::indicator:checked {image: url(:/checked.png);
}QCheckBox::indicator:checked:hover {image: url(:/checked_hover.png);
}QCheckBox::indicator:checked:pressed {image: url(:/checked_pressed.png);
}

qsscheckbox

（3）单选框

也是先创建一个qrc文件，类似于上面
在这里插入图片描述

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

cssradiobutton

（4）输入框

在这里插入图片描述

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）整合起来用一个登陆界面展示

先创建一个qrc文件载入一张图片作为登陆窗口的背景图
在这里插入图片描述
在ui建立一个与widget同大小的frame，将以下部件在frame上创建出来，然后调整frame样式表

在这里插入图片描述
都是上面提到的内容

QFrame {//设置图片作为背景border-image: url(:/slm.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;
}