【QT】QSS
【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以及margin
btn->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;
}今日分享就到这里~
腾讯云开发者
