[Qt][QSS][上]详细讲解
0.媒介[*]Qt仿照CSS(层叠样式表)的模式，引⼊了QSS
[*]Qt本⾝的设计理念和⽹⻚前端照旧存在⼀定差别的，因此QSS中只能⽀持部分CSS属性
[*]团体来说QSS要⽐CSS更简单⼀些
[*]留意：假如通过QSS设置的样式和通过C++代码设置的样式辩论，则QSS优先级更⾼
1.根本语法
[*]语法：
[*]对于CSS来说，根本的语法结构⾮常简单选择器{
属性名 : 属性值;
}
[*]QSS沿⽤了如许的设定选择器{
属性名 : 属性值;
}
[*]说明：
[*]选择器：描述了"哪个Widget要应⽤样式规则"
[*]指定控件之后，此时的样式会针对这个指定控件见效，也会对其子控件见效
[*]既要考虑到子控件，也要考虑到此时选择器是针对那个"范例"的控件
[*]属性：是⼀个键值对，属性名表⽰要设置哪种样式，属性值表⽰了设置的样式的值
[*]示例：QPushButton{
color : red;
}
2.QSS设置方式
1.指定控件样式设置
[*]QWidget中包含了setStyleSheet()⽅法，可以直接设置样式
[*]示例：ui->pushButton->setStyleSheet("QPushButton { color: red; }");
2.全局样式设置
[*]通过QApplication的setStyleSheet()⽅法设置整个程序的全局样式
[*]全局样式优点：
[*]使同⼀个样式针对多个控件⽣效，代码更轻便
[*]所有控件样式内聚在⼀起，便于维护和问题排查
[*]示例：int main(int argc, char *argv[])
{
QApplication a(argc, argv);
a.setStyleSheet("QPushButton { color: red; }");
// ...
}
[*]假如设置了全局样式，然后在某个控件里又设置了其他的样式，会怎样？
[*]两方面的样式会"叠加"起来 --> 样式的层叠特性
[*]假如设置了全局样式，在某个控件里设置的样式和全局样式辩论了，会怎样？
[*]局部样式的优先级更高，覆盖对应的全局样式
[*]总结：
[*]现实开辟中，可以在全局样式中设置比较通用的样式，统一整个程序的界面风格
[*]假如必要针对某个个控件举行微调，可以利用局部样式来做出调解
3.从文件加载样式表
[*]上述方法都是把样式通过硬编码的⽅式设置的
[*]如许使QSS代码和C++代码耦合在⼀起了，并不⽅便代码的维护
[*]更好的做法是把样式放到单独的⽂件中，通过读取⽂件的⽅式来加载样式
[*]示例：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());
// ...
}
4.使⽤Qt Designer编辑样式
[*]QSS也可以通过Qt Designer直接编辑，从⽽起到及时预览的结果，同时也能避免C++和QSS代码的耦合
[*]这种⽅式设置样式，样式内容会被以xml格式记录到ui⽂件中
[*]详细操作本篇文章不做展开，在软件内部很容易就能知道怎样操作
5.总结
[*]当发现⼀个控件的样式不符合预期的时候，要记得排查这四个地⽅
[*]全局样式(QApplication 设置的)
[*]指定控件样式
[*]指定控件父控件的样式(可能是从父控件继承过来的)
[*]QSS文件中的样式
[*]ui文件中的样式
[*]现实开辟中，假如必要设置样式，建议最好统一利用某一种方式来举行设置
3.选择器
1.选择器概况
[*]QSS的选择器⽀持以下⼏种，其规则和CSS选择器根本一致
[*]全局选择器：选择所有的widget
[*]范例选择器(type selector)：以QPushButton为例
[*]选择所有的QPushButton和其⼦类的控件
[*]类选择器(class selector)：以.QPushButton为例
[*]选择所有的QPushButton的控件，不会选择⼦类
[*]ID选择器：以#pushButton_2为例
[*]选择objectName为pushButton_2的控件
[*]通过范例选择器和ID选择器设置了辩论的样式时，ID选择器样式优先级更⾼
[*]后代选择器：以QDialog QPushButton为例
[*]选择QDialog的所有后代(⼦控件，孙⼦控件等)中的QPushButton
[*]⼦选择器：以QDialog>QPushButton为例
[*]选择QDialog的所有⼦控件中的QPushButton
[*]并集选择器：以QPushButton, QLineEdit, QComboBox为例
[*]选择QPushButton, QLineEdit, QComboBox这三种控件，接下来的样式会针对这三种控件都⽣效
[*]并集选择器是⼀种很好的代码复⽤的⽅式
[*]很多时候希望界⾯上的多个元素⻛格是统⼀的，就可以使⽤并集选择器，把样式属性同时指定给多种控件
[*]属性选择器：以QPushButton为例
[*]选择所有QPushButton中，flat属性为false的控件
[*]优先级问题？
[*]简单总结：
[*]选择器描述的范围越精准，则优先级越⾼
[*]⼀般来说，ID选择器优先级是最⾼的
[*]Qt⽂档上有详细的优先级规则介绍(参⻅The Style Sheet Syntax的Conflict Resolution章节)
[*]示例：// QString style = "QPushButton { color: red; font-size: 50px; }";
// style += "#pushButton_2 { color: green;} ";
// style += "#pushButton_3 { color: blue;} ";
// 并集选择器：如果想要设置的属性一样，可以用以下代码
QString style = "#pushButton_2, QLineEdit, QLabel { color: red; }";
a.setStyleSheet(style);
2.子控件选择器
[*]有些控件内部包含了多个"⼦控件"
[*]例如：QComboBox的下拉后的⾯板、QSpinBox的上下按钮等
[*]哪些控件拥有哪些⼦控件，参考⽂档Qt Style Sheets Reference中List of Sub-Controls章节
[*]可以通过⼦控件选择器::，针对上述子空间举行样式设置
[*]示例：QString style = "QComboBox::down-arrow { image: url(:/down.png); }";
a.setStyleSheet(style);
3.伪类选择器
[*]根据控件所处的某个状态被选择的，也可以理解为"伪状态选择器"
[*]当状态具备时,控件被选中，样式⽣效
[*]当状态不具备时,控件不被选中，样式失效
[*]例如：按钮被按下、输⼊框获取到焦点、⿏标移动到某个控件上等
[*]使⽤:的⽅式定义伪类选择器
[*]常用的伪类选择器：
[*]:hover：鼠标放到控件上
[*]:pressed：⿏标左键按下时
[*]:focus：获取输⼊焦点时
[*]:enabled：元素处于可⽤状态时
[*]:checked：被勾选时
[*]:read-only：元素为只读状态时
[*]以上状态都可以用!来取反
[*]例如：:!hover就是⿏标离开控件时，:!pressed就是⿏标松开时
[*]更多伪类选择器的详细情况，参考Qt Style Sheets Reference的Pseudo-States章节
[*]此处同样的功能，事件也可以实现，但是用伪类选择器要比事件的方式简单很多
[*]示例：QString style = "QPushButton { color: red; } "; // 默认状态
style += "QPushButton:hover { color: green; } "; // 特定状态
style += "QPushButton:pressed { color: blue; }"; // 特定状态
a.setStyleSheet(style);
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]