【Qt】界面优化（二）类型选择器，类选择器，ID选择器，并集选择器，子控件选择器，伪类选择器的介绍和使用

小编个人主页详情—请点击小编个人gitee代码仓库—请点击Qt系列专栏—请点击倘若命中无此运孤身亦可登昆仑送给屏幕面前的读者朋友们和小编自己!目录前言一、选择器选择器的介绍选择器的使用类型选择器的使用类选择器的使用ID选择器的使用并集选择器的使用子控件选择器的使用伪类选择器的使用总结前言【Qt】界面优化一QSS的介绍与基本使用样式与代码分离——书接上文 详情请点击——本文会在上文的基础上进行讲解所以对上文不了解的读者友友请点击前方的蓝字链接进行学习本文由小编为大家介绍——【Qt】界面优化二类型选择器类选择器ID选择器并集选择器子控件选择器伪类选择器的介绍和使用一、选择器选择器的介绍在QSS中的选择器有很多小编只讲解比较常用的几种选择器如下1类型选择器QPushButton选择所有的QPushButton及其子类控件……1选择所有的QPushButton我们很好理解但是对于这里的子类控件该如何理解呢而我们知道QPushButton一般不会有子类控件的……2那么这里我们可以通过QWidget来进行理解对于一个QWidget控件来讲按钮标签输入框等都是继承自QWidget所以按钮标签输入框等都是QWidget的子类控件……3而QWidget本身也是一个控件那么此时类型选择器我们选择QWidget那么此时对于QWidget设置的样式对于它的子类控件按钮标签输入框等同样也会生效2类选择器.QPushButton选择所有的QPushButton但是不会选择QPushButton的子类控件……1注意看类选择器和类型选择器不同类选择器前面有一个点……2有了上面对于类型选择器中对于QWidget的理解之后我们理解这里的类选择器不会选择子类控件也比较容易……3QWidget本身也是一个控件那么此时类选择器我们选择QWidget那么此时对于QWidget设置的样式仅仅对于QWidget本身生效而对于它的子类控件按钮标签输入框等不会生效3ID选择器#pushButton_2格式是以#开头然后后面跟上objectName这里的ID选择器中的ID指的就是这里的objectName由于objectName唯一所以ID也唯一就可以唯一的选择objectName为pushButton_2的控件4并集选择器QPushButton, QLineEdit, QComboBox选择QPushButton, QLineEdit, QComboBox这三种控件接下来设置的样式将会针对这三种控件都有效选择器的使用类型选择器的使用所以接下来我们就来使用一下类型选择器那么我们创建一个项目名为qss_5基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer此时我们拖拽左侧的按钮控件然后将其中的显示的文本修改为按钮objectName保持不变#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);QString styleQPushButton{ color: red; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}那么我们在main.cpp文件中main函数中通过QApplication设置全局样式此时我们定义一个QString类型的style然后选择器选择QPushButton对显示的文字颜色color设置为红色red接下来通过QApplication的应用程序对象a进行调用setStyleSheet将样式style进行传参设置即可运行结果如下此时按钮显示的文字颜色就被设置为了红色#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);QString styleQWidget{ color: red; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}所以此时QPushButton{ color: red; }中的QPushButton就是一个类型选择器而类型选择器设置的样式还可以对子类控件有效而这里的QPushButton并没有继承自QPushButton的子类控件呀所以我们该如何进行验证呢别忘了QPushButton作为派生类继承自基类QWidget所以QPushButton是QWidget的子类控件那么如上我们对于选择器可以选择QWidget设置样式然后看一下该样式对于QWidget的子类控件QPushButton是否也会生效运行结果如下此时按钮显示的文本颜色变成红色的了所以此时QWidget的样式设置对QWidget子类控件QPushButton也生效了类选择器的使用#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);QString style.QWidget{ color: red; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}那么我们知道类选择器设置的样式仅仅对当前选择的类生效对于当前选择的类的子类控件不会生效即类选择器不会选择子类控件所以我们来验证一下如上我们使用类选择器选择QWidget我们知道QPushButton是QWidget的子类控件由于是类选择器选择的QWidget所以对于当前选择的类QWidget的子类控件QPushButton不会生效运行结果如下如上按钮显示的文本颜色仍然为黑色也就代表类选择器选择的类QWidget的子类控件QPushButton不会生效即类选择器不会选中子类控件ID选择器的使用我们上面介绍的类型选择器和类选择器都是同时选择多个控件即一类或一组控件可是在实际开发中如果我想要选中某一个控件期望给同类控件的不同实例设置不同的样式那么此时我们就要使用ID选择器了#pushButton_2ID选择器的格式是以#开头然后后面跟上objectName这里的ID选择器中的ID指的就是这里的objectName由于在ui文件中生成的objectName唯一所以ID也唯一就可以唯一的选择objectName为pushButton_2的控件那么接下来我们就点击ui文件进入Qt Designer此时我们拖拽两个左侧的按钮控件将新拖拽的两个按钮显示的文本修改为按钮2按钮3并且此时我们观察右上角这三个按钮控件的objectName都是不相同的都是唯一的所以自然的通过ID选择器就可以唯一的选择某一个控件进行设置样式#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);QString styleQPushButton{ color: red; };style#pushButton_2{ color: green; };style#pushButton_3{ color: blue; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}在样式设置中选择器是可以有多个的所以此时我们先使用类型选择器选择QPushButton控件将文字颜色设置为红色此时界面上的所有按钮都被选中并且显示的文字颜色设置为了红色接下来我们使用ID选择器选择按钮2将按钮2的文字颜色设置为绿色然后我们使用ID选择器选择按钮3将按钮3的文字颜色设置为蓝色运行结果如下所以此时界面上按钮1显示的文字颜色为红色按钮2显示的文字颜色为绿色按钮3显示的文字颜色为蓝色这究竟是为什么呢类型选择器选择QPushButton控件将文字颜色设置为红色此时界面上的所有按钮1即按钮按钮2按钮3都被选中并且显示的文字颜色设置为了红色接下来我们使用ID选择器选择按钮2将按钮2的文字颜色设置为绿色然后我们使用ID选择器选择按钮3将按钮3的文字颜色设置为蓝色所以对于此时按钮1显示的文字颜色为红色我们不难理解同样的我们可以看到对于按钮2和按钮3类型选择器和ID选择器是同时选中了同一个控件的并且设置的样式是冲突的都是设置的文字颜色color此时ID选择器的优先级会更高所以按钮2显示的文字颜色为绿色按钮3显示的文字颜色为蓝色#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);QString styleQPushButton{ color: red; font-size: 50px };style#pushButton_2{ color: green; };style#pushButton_3{ color: blue; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}那么如果类型选择器和ID选择器设置的样式不冲突呢其实我们心中已经有了答案之前文章中小编讲解过QSS的层叠性所以此时如果类型选择器和ID选择器设置的样式不冲突那么两个样式都会同时生效话虽如此但是我们还是来验证一下所以如上在原来代码的基础上对于类型选择器选择的QPushButton中我们再额外的将显示的字体大小font-size设置为50像素即可关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——运行结果如下此时三个按钮显示的字体大小都为50像素了没有问题所以类型选择器选择的QPushButton中将显示的字体大小font-size设置为50像素那么ID选择器选择按钮2将按钮2的文字颜色设置为绿色然后我们使用ID选择器选择按钮3将按钮3的文字颜色设置为蓝色此时类型选择器设置的字体大小样式和ID选择器设置的文字颜色样式并不冲突并且由于QSS中的叠加性所以字体大小样式和文字颜色样式这两种样式都会生效并集选择器的使用有的时候对于多类控件我们需要设置相同样式但是对于每一类去重复设置相同样式又太过麻烦所以我们可以使用并集选择器对多类控件设置相同的样式并集选择器的格式的是QPushButton, QLineEdit, QComboBox并集选择器可以选择多个控件对于多个控件中间采用逗号进行间隔即可接下来我们点击ui文件进入Qt Designer那么此时我们拖拽左侧的标签控件单行输入框控件设置标签控件显示文本为标签#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);// QString style QPushButton{ color: red; font-size: 50px };// style #pushButton_2{ color: green; };// style #pushButton_3{ color: blue; };QString styleQPushButton, QLabel, QLineEdit{ color: red; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}所以此时我们将原来对于类型选择器和ID选择器的样式设置注释掉接下来我们使用并集选择器选择按钮控件标签控件单行输入框控件设置文字颜色样式为红色即可运行结果如下由于并集选择器选择了按钮控件标签控件单行输入框所以此时对于显示文字颜色这一种样式对于界面上的按钮控件标签控件单行输入框都生效了即界面上的按钮控件标签控件单行输入框显示的文本颜色都为红色#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);// QString style QPushButton{ color: red; font-size: 50px };// style #pushButton_2{ color: green; };// style #pushButton_3{ color: blue; };QString style#pushButton_2, QLabel, QLineEdit{ color: red; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}此时并集选择器进行多个选择的是类型选择器那么我们能否在并集选择器中除了使用类型选择器还使用ID选择器去选择单一的控件呢其实是可以的那么此时我们去除并集选择器中的QPushButton类型选择器代表此时我们不选择界面上所有的QPushButton了转而使用#pushButton_2这个ID选择器选择器去选择按钮2期望对于按钮按钮2按钮3仅仅设置按钮2显示的文本颜色为红色对于按钮按钮3显示的文本颜色为默认的黑色即可运行结果如下如上并集选择器选择了标签单行输入框所以单行输入框显示的文本颜色为红色并集选择器使用ID选择器选择了按钮2所以按钮2显示的文本颜色为红色按钮按钮3显示的文本颜色为默认的黑色无误所以我们可以得出并集选择器可以选择多个控件设置为同一个的样式可以使用类型选择器进行选择也可以使用ID选择器进行选择子控件选择器的使用有些控件内部包含了多个子控件例如上图左侧微调框右侧的上下按钮再例如上图右侧下拉框的右侧下拉按钮还有点击右侧下拉框右侧的下拉按钮之后弹出的下拉菜单都是子控件此时我们就可以使用子控件选择器::选中这些子控件进行样式的设置那么小编小编我们该如何得知哪些控件有子控件又如何得知这些包含子控件的控件内部包含哪些子控件呢此时我们可以在Qt Assistant对应的Qt官方文档中进行搜索Qt Style Sheets Reference然后点击List Of Sub-Controls如上左侧就是子控件的列举我们可以通过::的方式使用子控件选择器选择子控件右侧就是描述的子控件的位置以及这个这个子控件属于哪些控件并且我们看到左侧红框内的::down-arrow是一个子控件表示下拉箭头右侧的中含有QComboBox下拉框就代表下拉框QComboBox中包含这个下拉箭头子控件::down-arrow所以我们想要给下拉框中的下拉箭头添加图标这个下拉箭头代指的也就是下拉按钮所以我们是想要通过子控件选择器设置下拉框中子控件的样式给下拉按钮添加图标 接下来我们就来使用一下选择器那么我们创建一个项目名为qss_6基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer那么接下来我们拖拽左侧红框的下拉框然后双击下拉框进入编辑界面此时我们点击左下角的➕️依次添加11111, 22222, 33333即可并且我们可以看到下拉框右侧的下拉按钮的图标其实是一个系统默认的一个浅灰色的向下按钮的图标我们期望使用子控件选择器去更改下拉框右侧的下拉按钮的图标问题来了要更改图标前提就要有图标那么关于这个图标我们可以去阿里巴巴矢量图标库上去找里面的图标都是开源的可以供我们免费去进行下载使用如上左图小编已经提前准备好了一个下拉图标所以此时我们就可以使用qrc机制将下拉图标进行导入 关于qrc机制在第四点qrc机制中进行的讲解详情请点击——那么观察到如上右图代表此时我们已经将下拉图标导入到qrc成功#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);QString styleQComboBox::down-arrow { image: url(:/down.png); };a.setStyleSheet(style);Widget w;w.show();returna.exec();}所以此时在main.cpp源文件的main函数中我们先定义一个QString对象style作为样式那么对于样式我们先使用类选择器选择QComboBox下拉框然后再使用子控件选择器选择QComboBox下拉框中的down-arrow下拉按钮那么对于这个下拉按钮我们要设置它的图标image设置的话我们就可以通过url然后指定的图标文件路径即可设置图标运行结果如下所以此时观察上图的右下角界面上的下拉框的右侧下拉按钮的图标就被我们设置为了我们自定义的图标没有问题这里还有一个代码例子小编在前面讲解进度条的时候小编已经实现过了 在第二点QProgressBar中创建一个红色的进度条进行的讲解详情请点击——由于进度条中显示进度的块也是一个子控件所以也可以使用子控件选择器::chunk去修改进度条中块显示的颜色这里小编就主要把核心代码领出来那么就是QProgressBar::chunk{ background-color: red; }前面的代码代表我们要对进度条中的块这个子控件的背景色也就显示的颜色修改为红色没有问题伪类选择器的使用接下来我们要学习一下伪类选择器Pseudo-States伪类选择器也可以被称作伪状态选择器这个伪类选择器和我们之前学习的选择器有些不同前面介绍的选择器都是选中控件而伪类选择器选中的是控件的状态筛选符合一定状态的控件例如鼠标移动到某个控件上按钮被按下输入框获取焦点等控件状态都可以使用伪类选择器进行选择控件的状态伪类选择器的格式是使用冒号:进行选择被伪类选择器选择的控件状态有两点特性如下1当状态具备的时候控件被选中样式生效2当状态不具备的时候控件不被选中样式失效下面小编来介绍一下常用的伪类选择器1:hover鼠标放到控件上的时候2:pressed鼠标按下的时候3:focus获取输入焦点的时候4:enabled控件处于可用状态的时候5:checked控件被勾选的时候6:read-only控件为只读状态的时候同样的上述控件状态还可以取反!进行选择控件的状态例如:!hover就是鼠标离开控件的时候:!pressed就是鼠标松开的时候当然上述的控件状态小编只是介绍了一小部分也仅仅是比较常用的控件状态至于更多的控件状态我们可以在Qt Assistant上查阅Qt的官方文档进行学习此时我们可以在Qt Assistant对应的Qt官方文档中进行搜索Qt Style Sheets Reference然后点击List Of Pseudo-States如上左侧就表示伪类选择器可以选择的控件状态右侧就表示这些控件状态属于哪些控件当然不是所有的控件都有控件状态的换言之伪类选择器是无法选择一些控件的控件状态的因为这些控件本身就没有控件状态下面我们就可以基于控件选择器来实现一个按钮显示文本颜色的变化所以接下来我们就来使用一下伪类选择器那么我们创建一个项目名为qss_7基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer如上我们拖拽左侧的按钮控件并且将按钮显示的文本修改为按钮我们期望实现默认按钮显示的文本颜色为红色当鼠标进入按钮控件的时候按钮显示的文本颜色就变成绿色当鼠标按压按钮控件的时候按钮显示的文本颜色为蓝色#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);QString styleQPushButton { color: red; };styleQPushButton:hover { color: green; };styleQPushButton:pressed { color: blue; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}所以此时我们在main.cpp中在main函数中通过QApplication设置全局样式此时我们定义一个QString类型的style然后选择器选择QPushButton对显示的文字颜色color设置为红色red接下来让style拼接上伪态选择器对于这里的伪态选择器我们使用QPushButton:hover选择当鼠标处于按钮上的时候我们就将显示的文本颜色设置为绿色使用伪状态选择器QPushButton:pressed选择当鼠标按下按钮的时候此时就将显示的文本颜色设置为蓝色接下来通过QApplication的应用程序对象a进行调用setStyleSheet将样式style进行传参设置即可这里注意我们使用伪态选择器实现按钮颜色的变幻只用了4行代码运行结果如下如上默认按钮显示的文本颜色为红色当鼠标进入按钮控件的时候按钮显示的文本颜色就变成绿色当鼠标按压按钮控件的时候按钮显示的文本颜色为蓝色同样的接下来小编松开按钮也就意味着此时鼠标按压按钮状态不符合那么文本颜色也就不会呈现颜色由于此时鼠标还处于进入按钮控件的状态所以此时按钮显示的文本颜色就变成了绿色接下来小编将鼠标移出按钮控件那么很明显此时鼠标进入按钮控件的状态不满足所以此时按钮显示的文本颜色就不会为绿色了此时按钮显示的文本颜色就为默认的红色之前小编让大家注意我们使用伪态选择器实现按钮颜色的变幻只用了4行代码那么我们是否可以使用事件机制实现按钮颜色的变幻呢毫无疑问是可以的下面小编来讲解一下思路使用PushButton派生类继承基类QPushButton然后重写事件处理函数即可大原则虽然是这些但是去重写事件处理函数的时候还是比较繁琐的1初始状态下我们需要按钮显示的文字颜色为红色所以我们在PushButton的构造函数中使用状态选择器将按钮显示的文字设置为红色2重写鼠标进入的事件处理函数enterEvent当鼠标进入按钮按钮控件的时候就使用状态选择器将按钮显示的文字设置为绿色3重写鼠标按下的事件处理函数mousePressEvent 当鼠标按下按钮控件的时候就使用状态选择器将按钮显示的文字设置为蓝色4重写鼠标松开的事件处理函数mouseReleaseEvent当鼠标松开按钮控件的时候就使用状态选择器将按钮显示的文字设置为绿色5重写鼠标离开的事件处理函数mouseMoveEvent当鼠标离开按钮控件的时候就使用状态选择器将按钮显示的文字设置为红色使用事件机制完成按钮的颜色变幻要编写编写的代码行数可是要远远超过使用伪态选择器的4行代码所以使用事件机制还是挺繁琐的吧那么相对来讲伪态选择器的4行代码就比较简单了所以我们还要事件机制干什么呢全部使用选择器不就好了注意这种观念是不正确的不科学的虽然在样式设置上选择器要比事件机制好用但是事件机制可以完成的功能不远远不止样式的设置选择器仅仅能用于样式的设置而事件机制除了样式设置之外还可以去完成很多的其它的业务逻辑并且事件机制还支撑着Qt信号槽机制的实现所以事件机制在Qt中也是非常重要的模块当然对于样式的设置相对于事件机制我们还是比较倾向于使用选择器因为选择器对于样式的设置容易实现写的代码行数还少总结以上就是今天的博客内容啦希望对读者朋友们有帮助水滴石穿坚持就是胜利读者朋友们可以点个关注点赞收藏加关注找到小编不迷路