小编个人主页详情—请点击小编个人gitee代码仓库—请点击Qt系列专栏—请点击倘若命中无此运孤身亦可登昆仑送给屏幕面前的读者朋友们和小编自己!目录前言一、QSS的介绍二、QSS的基本使用给指定控件或指定控件的子控件设置样式设置全局样式三、样式与代码分离qss文件中的样式ui文件中的样式总结前言【Qt】系统相关十二QSound播放音频文件小结——书接上文 详情请点击——本文会在上文的基础上进行讲解所以对上文不了解的读者友友请点击前方的蓝字链接进行学习本文由小编为大家介绍——【Qt】界面优化一QSS的介绍与基本使用样式与代码分离一、QSS的介绍接下来我们就进入Qt中的界面优化章节的学习了这里与其说是界面优化倒不如说是界面美化而一个程序的界面是否好看重要吗其实我们可以从两个维度来看1有些面向专业领域的程序界面的好看与否不是很关键更关键的是实际的效果2有些面向普通用户领域的程序界面好看还是很大的加分项的也就是一个看脸的时代例如王者荣耀中元歌建模这么超标这么优雅这么帅气谁又会不喜欢呢在之前的文章中小编预先讲解过一定的QSS内容如下1关于和QSS相关的styleSheet属性在第三点QWidget的styleSheet属性中进行的讲解详情请点击——2关于QSS在第一点QColorDialog中基于QColorDialog让用户选择颜色修改窗口的背景色的第14点进行的讲解详情请点击——Qt中的QSS是参考了网页前端中的CSSQSS可以针对界面样式进行设置对于界面样式包括不限于大小位置颜色背景间距字体等界面上可以展示给用户看到的都可以通过QSS进行样式设置CSS的功能是非常强大的非常丰富的而QSS要逊色一筹但是QSS也可以完成很多的工作既然QSS是参考了网页前端中的CSS那么小编小编我没学过前端网页中的CSS影响我们学习Qt中的QSS吗不影响虽然QSS是参考了网页前端中的CSS但是Qt中的QSS已经自成体系与是否学习过前端网页中的CSS关系不大有的时候我们可以通过QSS设置样式例如设置字体属性同样有的时候我们也可以通过C代码设置样式例如QFont那么如果两者冲突那么QSS的优先级更高即Qt此时会以QSS的方式设置样式选择器{属性名:属性值;}如上就是QSS的基本语法1选择器用于先选择某个/某一类控件接下来进行的各种属性的设置都是针对选中控件生效的2属性名: 属性值; 通俗来讲就是针对某些样式进行具体的设计了……1其格式和键值对key-value的形式一致中间采用冒号分隔……2属性名作为key值表示要对哪个属性进行设置属性值作为value值表示要将这个属性的设置……3而类似的用于设置属性的键值对可以有多对中间以分号分隔二、QSS的基本使用给指定控件或指定控件的子控件设置样式在学习了QSS的介绍之后下面我们就来实际使用一下QSS所以接下来我们创建一个项目名为qss_1基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer此时我们拖拽左侧的按钮控件修改按钮控件显示的文本为按钮接下来直接点击左下角的运行按钮结果如右下角此时我们可以看到界面上按钮上显示的按钮文本的颜色为黑色此时我们期望通过QSS将按钮的文本颜色修改为红色#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton{ color: red; });}Widget::~Widget(){deleteui;}那么在Widget的构造函数中QSS其实也就是对于样式表进行设置我们通过ui指针调用pushButton对象中设置样式表方法setStyleSheet如上传参一个QString的字符串选择器{属性名:属性值;}那么对于这个QString的字符串的格式也就是当初我们介绍的QSS的基本语法由于是要对按钮的样式进行设置这里的选择器我们使用QPushButton由于是要对显示文本的颜色进行设置所以属性名这里我们使用color表示显示文本的颜色由于我们要对按钮显示的文本颜色设置为红色所以属性值我们使用red运行结果如下所以此时如上按钮显示的文本颜色成功的显示为了红色符合我们的需求#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton{ color: #0000FF; });}Widget::~Widget(){deleteui;}其实我们不仅可以使用红色red指定要设置的颜色还可以使用红绿蓝进行指定也就是rgb或者#的形式这些也就是和计算机中的颜色相关关于计算机中的颜色在第三点QWidget的styleSheet属性中计算机中的颜色进行的讲解详情请点击——那么这里小编就来使用#0000FF进行设置显示的颜色为蓝色前两个00表示红色没有中间两个00表示绿色没有后面的两个FF表示蓝色拉满所以此时显示出的颜色就为蓝色那么我们将#0000FF设置到按钮显示文本的颜色上即可运行结果如下如上没有问题此时按钮上文本显示颜色的就为蓝色了那么如上小编点击ui文件然后继续拖拽一个按钮并且将这个新拖拽的按钮显示文本设置为按钮2想要验证一下是否当初通过QSS对按钮1设置的显示字体的颜色会对按钮2生效所以此时我们点击左下角运行那么运行结果如上图的右下角此时按钮2显示的字体仍然是黑色所以通过QSS对按钮1设置的显示字体的颜色不会对按钮2生效这也很正常因为我们是使用的按钮1的pushButton调用的setStyleSheet去设置的按钮1的styleSheet样式表属性自然不会影响按钮2所以也就意味着通过QSS设置样式的时候是可以指定某个样式进行设置的并且不仅如此当我们指定了控件之后此时的样式就会针对这个指定控件的子控件也会生效的而由于QPushButton对应的按钮1已经没有子控件了所以我们该如何验证这个特定呢其实我们可以使用Widget当前界面的两个按钮可都是Widget控件的子控件呀是的#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);// ui-pushButton-setStyleSheet(QPushButton{ color: #0000FF; });this-setStyleSheet(QPushButton{ color: red; });}Widget::~Widget(){deleteui;}所以此时在Widget的构造函数中我们将原来对于按钮1设置颜色的代码注释掉而this指针指向对应的控件就是Widget控件所以此时我们使用this指针调用setStyleSheet就是对Widget控件设置显示的颜色那么这里选择器我们选择Widget控件中的QPushButton按钮然后对于按钮显示的文本颜色设置为红色即可运行结果如下由于界面上两个按钮都是Widget控件的子控件所以由于QSS设置样式表的特性我们对于Widget设置的样式对于Widget控件的子控件对应的两个按钮也都有效此时界面上的两个按钮上显示的文本颜色就都为红色了但是如果Widget的子控件不是按钮了呢也就是说和选择器选择的控件没有关系了那么此时显示的文本颜色还会生效吗下面我们来验证一下接下来我们点击ui文件进入Qt Designer此时拖拽左侧的单行输入框控件然后双击单行输入框提前设置好上面显示文本为单行输入框那么接下来我们点击左下角的运行程序此时显示的界面上对于单行输入框上显示文本的颜色并没有被设置为红色而是仍然维持默认的黑色所以这也就代表了虽然QSS设置控件的样式表可以对子控件生效但是具体对于哪个子控件有效还和选择器选择的子控件有关这里选择器选择的就是Widget控件的中所有的按钮QPushButton子控件所以对于按钮1和按钮2才会显示的文本颜色才为红色由于选择器并没有选择单行输入框QLineEdit所以单行输入框此时显示的文本颜色就为默认的黑色了设置全局样式其实我们不光可以通过QSS给指定控件或指定控件的子控件设置样式还可以通过QSS设置全局样式设置全局样式的目的是将界面上所有的样式都集中到一起来组织并进行设置便于统一整个程序的界面风格所以接下来我们创建一个项目名为qss_2基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer所以此时我们拖拽左侧三个按钮然后设置按钮显示的文本分别为按钮按钮2按钮3#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);a.setStyleSheet(QPushButton{ color: red });Widget w;w.show();returna.exec();}那么设置全局样式的话和之前针对某一个控件进行设置有些不同设置全局样式需要在main.cpp中的main函数中进行设置这里针对的就是QApplication类型的a对象QApplication也就是当前的应用程序同样的由于应用程序运行始终要处于main函数范围内这里我们也可以将QApplication类型的a对象理解为一个全局对象始终有效那么此时我们使用QApplication类型的应用程序对象a进行调用setStyleSheet设置样式就是针对整个程序的所有控件都是生效的当然虽然我们可以设置的控件范围确定了但是我们还是需要通过选择器对要设置的控件进行筛选所以此时选择器选择QPushButton按钮然后对显示的文本颜色color设置为红色运行结果如下如上此时界面上的三个按钮显示的文本就为红色了所以此时针对全局样式设置和针对某个控件的样式设置就有两个问题了如下1问题一如果设置了全局样式然后在某个控件里又设置了其它样式此时会怎么样2问题二如果设置了全局样式在某个控件里设置的样式和全局样式冲突了此时又会怎么样#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton{ font-size: 50px; });}Widget::~Widget(){deleteui;}那么针对上面的两个问题小编会进行逐一的验证讲解下面我们先来看问题一如果设置了全局样式然后在某个控件里又设置了其它样式此时会怎么样那么此时我们在Widget的.cpp源文件中对于按钮1那么我们使用setStyleSheet方法设置按钮1显示的文本大小font-size为50px像素即可运行结果如下所以此时设置了全局样式按钮的文字颜色为红色然后在控件1中又设置了其它样式也就是文字大小为50像素此时这两方面的样式会叠加起来互不影响共存关系此时也就是层叠性关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——网页前端中的CSS也叫做CSS层叠样式表由于QSS是从CSS这里参考过来的所以QSS中也沿用实现了层叠性#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton{ font-size: 50px; });ui-pushButton_2-setStyleSheet(QPushButton{ color: blue; });}Widget::~Widget(){deleteui;}接下来我们来看问题二如果设置了全局样式在某个控件里设置的样式和全局样式冲突了此时又会怎么样那么此时我们在Widget的.cpp源文件中对于按钮2那么我们使用setStyleSheet方法设置按钮2显示的文本颜色设置为蓝色即可运行结果如下所以此时设置了全局样式按钮的文字颜色为红色然后在控件2中设置文字颜色为蓝色即按钮2又设置了冲突的样式最终按钮2呈现的颜色为蓝色所以也就是说当全局样式和局部样式冲突的时候局部样式的优先级是更高的覆盖了对应的全局样式那么凭借这个特性在实际开发中我们就可以在全局样式中设置比较通用的样式来达到统一整个程序界面风格的效果此时如果需要针对某个控件进行微调就可以使用局部样式来进行调整三、样式与代码分离qss文件中的样式ui-pushButton-setStyleSheet(QPushButton{ font-size: 50px; });ui-pushButton_2-setStyleSheet(QPushButton{ color: blue; });那么在QSS的基本使用中样式代码和C代码都是混在一起的类似于上面这样如果QSS样式代码非常简单那倒是影响不大但是如果QSS代码非常复杂继续将样式代码和C代码混在一起此时代码的维护成本就会很高很高那么针对QSS样式代码非常复杂的情况我们就可以把样式代码拎出来放到单独的文件中后续就可以让C代码来读取并加载文件内容步骤如下1创建qrc文件通过qrc文件管理样式文件2创建单独的qss文件把这样的qss文件放到qrc中3编写C代码读取qss文件中的内容并设置样式即可了解了如何操作之后接下来我们创建一个项目名为qss_3基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer接下来我们拖拽左侧按钮然后将按钮显示的文本修改为按钮关于qrc机制在第四点qrc机制中进行的讲解详情请点击—— 如上此时我们就创建qrc文件成功了接下来我们就要创建qss文件了所以此时我们右击.pro文件然后选择在Explorer中显示接下来我们界面的空白位置选择新建然后继续选择文本文档接下来右击这个新建文本文档然后选择重命名确定更改将文件名命名为style.qss即可紧接着我们将这个qss文件添加到qrc中观察到如上界面代表此时qss文件添加到qrc成功接下来我们就点击左上角的文件然后选择打开文件或项目接下来选择style.qss这个qss文件进行打开QPushButton{color:red;}如上在打开的qss文件中我们就可以编写样式代码了那么我们选择QPushButton将其中的文件颜色设置为红色即可#includewidget.h#includeQApplication#includeQFileQStringloadQSS(){QFilefile(:/style.qss);file.open(QFile::ReadOnly);QString stylefile.readAll();file.close();returnstyle;}intmain(intargc,char*argv[]){QApplicationa(argc,argv);a.setStyleSheet(loadQSS());Widget w;w.show();returna.exec();}接下来在main.cpp文件中我们实现一个加载qss文件的函数loadQSS由于要加载qss文件所以势必就会涉及到Qt中的文件操作 关于Qt中的文件操作QFile的使用详情请点击——所以在loadQSS中我们传入qss文件路径:/style.qss定义一个QFile对象file接下来以只读方式打开qss文件然后使用readAll读取qss文件中的内容其实这里的readAll返回值是QByteArray类型的由于QString的构造函数中可以使用QByteArray类型的对象进行构造所以这里我们可以使用QString类型的对象style接收readAll的返回值接下来打开了文件不要忘记关闭文件否则就会造成内存资源泄露和文件资源泄露所以此时我们close关闭文件然后return将读取到的qss文件内容style返回即可接下来在main函数中我们使用QApplication对象a调用setStyleSheet设置全局样式然后将调用loadQSS的返回值作为参数进行传参即可运行结果如下此时按钮显示的文本颜色就变成了红色没有问题这个方案还是比较麻烦又要创建qrc文件又要创建qss文件还要进行编写读取qss文件的代码还要进行调用操作下来还是比较麻烦的小编小编有没有什么更简单的方案有的有的上述这种方案仅供大家参考实际开发中我们还有更方便的方案如下ui文件中的样式其实在Qt Designer中集成了设置样式这样的功能允许我们把样式直接写到.ui文件里所以接下来我们创建一个项目名为qss_4基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer所以此时我们拖拽左侧的按钮控件然后将按钮上显示的文本修改为按钮接下来选中Widget窗口然后右击Widget窗口选择改变样式表通过这里的改变样式表我们就可以编写界面的样式了并且在这里进行的任何样式的修改都会记录到ui文件中并且在程序运行的时候自动生效并且还支持实时预览所以此时我们选择QPushButton此时小编故意不输入完全QSS仅仅在后面加上一个{注意左图的左下角还会提示是否是一个有效样式表很明显此时不是一个有效的样式表那么接下来将文字颜色样式设置为红色即可此时小编输入完全QSS了此时右图的左下角就会提示是一个有效样式表了这一个功能可以说是很人性化了可以帮助我们检查QSS样式表在语法上有没有错误接下来我们点击OK即可那么当我们点击OK之后当我们设置了之后由于支持实时预览所以此时Widget界面上按钮显示的文本颜色就会变成红色此时我们点击左下角运行程序那么此时运行结果如上图的右下角此时界面上的按钮显示的文本颜色就变成了红色?xml version1.0 encodingUTF-8?uiversion4.0classWidget/classwidgetclassQWidgetnameWidgetpropertynamegeometryrectx0/xy0/ywidth800/widthheight600/height/rect/propertypropertynamewindowTitlestringWidget/string/propertypropertynamestyleSheetstringnotrtrueQPushButton{ color: red; }/string/propertywidgetclassQPushButtonnamepushButtonpropertynamegeometryrectx280/xy180/ywidth191/widthheight91/height/rect/propertypropertynametextstring按钮/string/property/widget/widgetresources/connections//ui那么此时我们在点击左侧的编辑进入ui文件中查看对应的xml很明显如上在ui文件记录了当前编辑的样式那么后续就会根据ui文件生成C代码也就同时会把样式设置过去哇果然很方便但是如果我们界面上已经设置好的样式不符合我们的需求我们想要针对样式进行排查并且调整该如何做呢其实排查起来还挺麻烦由于Qt中样式的设置太过灵活有很多地方都可以进行设置这就导致当某个控件的样式不符合预期的时候排查起来就比较麻烦那么我们排查的时候排查顺序如下1全局样式QApplication设置的2指定控件的样式这个控件是否设置了样式3指定控价的父控件的样式因为有可能当前控件的样式是从父控件继承过来的4qss文件中的样式5ui文件中的样式所以如上排查起来还是比较麻烦的尤其是在业务场景比较复杂的情况下此时样式代码也会很复杂排查起来就更麻烦所以在实际开发中如果需要设置样式我们最好统一使用一种方式来进行设置比如容易将样式代码放在qss文件中统一设置或者将样式代码放在ui文件中进行统一设置怎么方便怎么来当然最为方便的还是将样式代码放在ui文件中进行统一设置总结以上就是今天的博客内容啦希望对读者朋友们有帮助水滴石穿坚持就是胜利读者朋友们可以点个关注点赞收藏加关注找到小编不迷路
【Qt】界面优化（一）QSS的介绍与基本使用，样式与代码分离
小编个人主页详情—请点击小编个人gitee代码仓库—请点击Qt系列专栏—请点击倘若命中无此运孤身亦可登昆仑送给屏幕面前的读者朋友们和小编自己!目录前言一、QSS的介绍二、QSS的基本使用给指定控件或指定控件的子控件设置样式设置全局样式三、样式与代码分离qss文件中的样式ui文件中的样式总结前言【Qt】系统相关十二QSound播放音频文件小结——书接上文 详情请点击——本文会在上文的基础上进行讲解所以对上文不了解的读者友友请点击前方的蓝字链接进行学习本文由小编为大家介绍——【Qt】界面优化一QSS的介绍与基本使用样式与代码分离一、QSS的介绍接下来我们就进入Qt中的界面优化章节的学习了这里与其说是界面优化倒不如说是界面美化而一个程序的界面是否好看重要吗其实我们可以从两个维度来看1有些面向专业领域的程序界面的好看与否不是很关键更关键的是实际的效果2有些面向普通用户领域的程序界面好看还是很大的加分项的也就是一个看脸的时代例如王者荣耀中元歌建模这么超标这么优雅这么帅气谁又会不喜欢呢在之前的文章中小编预先讲解过一定的QSS内容如下1关于和QSS相关的styleSheet属性在第三点QWidget的styleSheet属性中进行的讲解详情请点击——2关于QSS在第一点QColorDialog中基于QColorDialog让用户选择颜色修改窗口的背景色的第14点进行的讲解详情请点击——Qt中的QSS是参考了网页前端中的CSSQSS可以针对界面样式进行设置对于界面样式包括不限于大小位置颜色背景间距字体等界面上可以展示给用户看到的都可以通过QSS进行样式设置CSS的功能是非常强大的非常丰富的而QSS要逊色一筹但是QSS也可以完成很多的工作既然QSS是参考了网页前端中的CSS那么小编小编我没学过前端网页中的CSS影响我们学习Qt中的QSS吗不影响虽然QSS是参考了网页前端中的CSS但是Qt中的QSS已经自成体系与是否学习过前端网页中的CSS关系不大有的时候我们可以通过QSS设置样式例如设置字体属性同样有的时候我们也可以通过C代码设置样式例如QFont那么如果两者冲突那么QSS的优先级更高即Qt此时会以QSS的方式设置样式选择器{属性名:属性值;}如上就是QSS的基本语法1选择器用于先选择某个/某一类控件接下来进行的各种属性的设置都是针对选中控件生效的2属性名: 属性值; 通俗来讲就是针对某些样式进行具体的设计了……1其格式和键值对key-value的形式一致中间采用冒号分隔……2属性名作为key值表示要对哪个属性进行设置属性值作为value值表示要将这个属性的设置……3而类似的用于设置属性的键值对可以有多对中间以分号分隔二、QSS的基本使用给指定控件或指定控件的子控件设置样式在学习了QSS的介绍之后下面我们就来实际使用一下QSS所以接下来我们创建一个项目名为qss_1基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer此时我们拖拽左侧的按钮控件修改按钮控件显示的文本为按钮接下来直接点击左下角的运行按钮结果如右下角此时我们可以看到界面上按钮上显示的按钮文本的颜色为黑色此时我们期望通过QSS将按钮的文本颜色修改为红色#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton{ color: red; });}Widget::~Widget(){deleteui;}那么在Widget的构造函数中QSS其实也就是对于样式表进行设置我们通过ui指针调用pushButton对象中设置样式表方法setStyleSheet如上传参一个QString的字符串选择器{属性名:属性值;}那么对于这个QString的字符串的格式也就是当初我们介绍的QSS的基本语法由于是要对按钮的样式进行设置这里的选择器我们使用QPushButton由于是要对显示文本的颜色进行设置所以属性名这里我们使用color表示显示文本的颜色由于我们要对按钮显示的文本颜色设置为红色所以属性值我们使用red运行结果如下所以此时如上按钮显示的文本颜色成功的显示为了红色符合我们的需求#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton{ color: #0000FF; });}Widget::~Widget(){deleteui;}其实我们不仅可以使用红色red指定要设置的颜色还可以使用红绿蓝进行指定也就是rgb或者#的形式这些也就是和计算机中的颜色相关关于计算机中的颜色在第三点QWidget的styleSheet属性中计算机中的颜色进行的讲解详情请点击——那么这里小编就来使用#0000FF进行设置显示的颜色为蓝色前两个00表示红色没有中间两个00表示绿色没有后面的两个FF表示蓝色拉满所以此时显示出的颜色就为蓝色那么我们将#0000FF设置到按钮显示文本的颜色上即可运行结果如下如上没有问题此时按钮上文本显示颜色的就为蓝色了那么如上小编点击ui文件然后继续拖拽一个按钮并且将这个新拖拽的按钮显示文本设置为按钮2想要验证一下是否当初通过QSS对按钮1设置的显示字体的颜色会对按钮2生效所以此时我们点击左下角运行那么运行结果如上图的右下角此时按钮2显示的字体仍然是黑色所以通过QSS对按钮1设置的显示字体的颜色不会对按钮2生效这也很正常因为我们是使用的按钮1的pushButton调用的setStyleSheet去设置的按钮1的styleSheet样式表属性自然不会影响按钮2所以也就意味着通过QSS设置样式的时候是可以指定某个样式进行设置的并且不仅如此当我们指定了控件之后此时的样式就会针对这个指定控件的子控件也会生效的而由于QPushButton对应的按钮1已经没有子控件了所以我们该如何验证这个特定呢其实我们可以使用Widget当前界面的两个按钮可都是Widget控件的子控件呀是的#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);// ui-pushButton-setStyleSheet(QPushButton{ color: #0000FF; });this-setStyleSheet(QPushButton{ color: red; });}Widget::~Widget(){deleteui;}所以此时在Widget的构造函数中我们将原来对于按钮1设置颜色的代码注释掉而this指针指向对应的控件就是Widget控件所以此时我们使用this指针调用setStyleSheet就是对Widget控件设置显示的颜色那么这里选择器我们选择Widget控件中的QPushButton按钮然后对于按钮显示的文本颜色设置为红色即可运行结果如下由于界面上两个按钮都是Widget控件的子控件所以由于QSS设置样式表的特性我们对于Widget设置的样式对于Widget控件的子控件对应的两个按钮也都有效此时界面上的两个按钮上显示的文本颜色就都为红色了但是如果Widget的子控件不是按钮了呢也就是说和选择器选择的控件没有关系了那么此时显示的文本颜色还会生效吗下面我们来验证一下接下来我们点击ui文件进入Qt Designer此时拖拽左侧的单行输入框控件然后双击单行输入框提前设置好上面显示文本为单行输入框那么接下来我们点击左下角的运行程序此时显示的界面上对于单行输入框上显示文本的颜色并没有被设置为红色而是仍然维持默认的黑色所以这也就代表了虽然QSS设置控件的样式表可以对子控件生效但是具体对于哪个子控件有效还和选择器选择的子控件有关这里选择器选择的就是Widget控件的中所有的按钮QPushButton子控件所以对于按钮1和按钮2才会显示的文本颜色才为红色由于选择器并没有选择单行输入框QLineEdit所以单行输入框此时显示的文本颜色就为默认的黑色了设置全局样式其实我们不光可以通过QSS给指定控件或指定控件的子控件设置样式还可以通过QSS设置全局样式设置全局样式的目的是将界面上所有的样式都集中到一起来组织并进行设置便于统一整个程序的界面风格所以接下来我们创建一个项目名为qss_2基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer所以此时我们拖拽左侧三个按钮然后设置按钮显示的文本分别为按钮按钮2按钮3#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);a.setStyleSheet(QPushButton{ color: red });Widget w;w.show();returna.exec();}那么设置全局样式的话和之前针对某一个控件进行设置有些不同设置全局样式需要在main.cpp中的main函数中进行设置这里针对的就是QApplication类型的a对象QApplication也就是当前的应用程序同样的由于应用程序运行始终要处于main函数范围内这里我们也可以将QApplication类型的a对象理解为一个全局对象始终有效那么此时我们使用QApplication类型的应用程序对象a进行调用setStyleSheet设置样式就是针对整个程序的所有控件都是生效的当然虽然我们可以设置的控件范围确定了但是我们还是需要通过选择器对要设置的控件进行筛选所以此时选择器选择QPushButton按钮然后对显示的文本颜色color设置为红色运行结果如下如上此时界面上的三个按钮显示的文本就为红色了所以此时针对全局样式设置和针对某个控件的样式设置就有两个问题了如下1问题一如果设置了全局样式然后在某个控件里又设置了其它样式此时会怎么样2问题二如果设置了全局样式在某个控件里设置的样式和全局样式冲突了此时又会怎么样#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton{ font-size: 50px; });}Widget::~Widget(){deleteui;}那么针对上面的两个问题小编会进行逐一的验证讲解下面我们先来看问题一如果设置了全局样式然后在某个控件里又设置了其它样式此时会怎么样那么此时我们在Widget的.cpp源文件中对于按钮1那么我们使用setStyleSheet方法设置按钮1显示的文本大小font-size为50px像素即可运行结果如下所以此时设置了全局样式按钮的文字颜色为红色然后在控件1中又设置了其它样式也就是文字大小为50像素此时这两方面的样式会叠加起来互不影响共存关系此时也就是层叠性关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——网页前端中的CSS也叫做CSS层叠样式表由于QSS是从CSS这里参考过来的所以QSS中也沿用实现了层叠性#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton{ font-size: 50px; });ui-pushButton_2-setStyleSheet(QPushButton{ color: blue; });}Widget::~Widget(){deleteui;}接下来我们来看问题二如果设置了全局样式在某个控件里设置的样式和全局样式冲突了此时又会怎么样那么此时我们在Widget的.cpp源文件中对于按钮2那么我们使用setStyleSheet方法设置按钮2显示的文本颜色设置为蓝色即可运行结果如下所以此时设置了全局样式按钮的文字颜色为红色然后在控件2中设置文字颜色为蓝色即按钮2又设置了冲突的样式最终按钮2呈现的颜色为蓝色所以也就是说当全局样式和局部样式冲突的时候局部样式的优先级是更高的覆盖了对应的全局样式那么凭借这个特性在实际开发中我们就可以在全局样式中设置比较通用的样式来达到统一整个程序界面风格的效果此时如果需要针对某个控件进行微调就可以使用局部样式来进行调整三、样式与代码分离qss文件中的样式ui-pushButton-setStyleSheet(QPushButton{ font-size: 50px; });ui-pushButton_2-setStyleSheet(QPushButton{ color: blue; });那么在QSS的基本使用中样式代码和C代码都是混在一起的类似于上面这样如果QSS样式代码非常简单那倒是影响不大但是如果QSS代码非常复杂继续将样式代码和C代码混在一起此时代码的维护成本就会很高很高那么针对QSS样式代码非常复杂的情况我们就可以把样式代码拎出来放到单独的文件中后续就可以让C代码来读取并加载文件内容步骤如下1创建qrc文件通过qrc文件管理样式文件2创建单独的qss文件把这样的qss文件放到qrc中3编写C代码读取qss文件中的内容并设置样式即可了解了如何操作之后接下来我们创建一个项目名为qss_3基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer接下来我们拖拽左侧按钮然后将按钮显示的文本修改为按钮关于qrc机制在第四点qrc机制中进行的讲解详情请点击—— 如上此时我们就创建qrc文件成功了接下来我们就要创建qss文件了所以此时我们右击.pro文件然后选择在Explorer中显示接下来我们界面的空白位置选择新建然后继续选择文本文档接下来右击这个新建文本文档然后选择重命名确定更改将文件名命名为style.qss即可紧接着我们将这个qss文件添加到qrc中观察到如上界面代表此时qss文件添加到qrc成功接下来我们就点击左上角的文件然后选择打开文件或项目接下来选择style.qss这个qss文件进行打开QPushButton{color:red;}如上在打开的qss文件中我们就可以编写样式代码了那么我们选择QPushButton将其中的文件颜色设置为红色即可#includewidget.h#includeQApplication#includeQFileQStringloadQSS(){QFilefile(:/style.qss);file.open(QFile::ReadOnly);QString stylefile.readAll();file.close();returnstyle;}intmain(intargc,char*argv[]){QApplicationa(argc,argv);a.setStyleSheet(loadQSS());Widget w;w.show();returna.exec();}接下来在main.cpp文件中我们实现一个加载qss文件的函数loadQSS由于要加载qss文件所以势必就会涉及到Qt中的文件操作 关于Qt中的文件操作QFile的使用详情请点击——所以在loadQSS中我们传入qss文件路径:/style.qss定义一个QFile对象file接下来以只读方式打开qss文件然后使用readAll读取qss文件中的内容其实这里的readAll返回值是QByteArray类型的由于QString的构造函数中可以使用QByteArray类型的对象进行构造所以这里我们可以使用QString类型的对象style接收readAll的返回值接下来打开了文件不要忘记关闭文件否则就会造成内存资源泄露和文件资源泄露所以此时我们close关闭文件然后return将读取到的qss文件内容style返回即可接下来在main函数中我们使用QApplication对象a调用setStyleSheet设置全局样式然后将调用loadQSS的返回值作为参数进行传参即可运行结果如下此时按钮显示的文本颜色就变成了红色没有问题这个方案还是比较麻烦又要创建qrc文件又要创建qss文件还要进行编写读取qss文件的代码还要进行调用操作下来还是比较麻烦的小编小编有没有什么更简单的方案有的有的上述这种方案仅供大家参考实际开发中我们还有更方便的方案如下ui文件中的样式其实在Qt Designer中集成了设置样式这样的功能允许我们把样式直接写到.ui文件里所以接下来我们创建一个项目名为qss_4基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer所以此时我们拖拽左侧的按钮控件然后将按钮上显示的文本修改为按钮接下来选中Widget窗口然后右击Widget窗口选择改变样式表通过这里的改变样式表我们就可以编写界面的样式了并且在这里进行的任何样式的修改都会记录到ui文件中并且在程序运行的时候自动生效并且还支持实时预览所以此时我们选择QPushButton此时小编故意不输入完全QSS仅仅在后面加上一个{注意左图的左下角还会提示是否是一个有效样式表很明显此时不是一个有效的样式表那么接下来将文字颜色样式设置为红色即可此时小编输入完全QSS了此时右图的左下角就会提示是一个有效样式表了这一个功能可以说是很人性化了可以帮助我们检查QSS样式表在语法上有没有错误接下来我们点击OK即可那么当我们点击OK之后当我们设置了之后由于支持实时预览所以此时Widget界面上按钮显示的文本颜色就会变成红色此时我们点击左下角运行程序那么此时运行结果如上图的右下角此时界面上的按钮显示的文本颜色就变成了红色?xml version1.0 encodingUTF-8?uiversion4.0classWidget/classwidgetclassQWidgetnameWidgetpropertynamegeometryrectx0/xy0/ywidth800/widthheight600/height/rect/propertypropertynamewindowTitlestringWidget/string/propertypropertynamestyleSheetstringnotrtrueQPushButton{ color: red; }/string/propertywidgetclassQPushButtonnamepushButtonpropertynamegeometryrectx280/xy180/ywidth191/widthheight91/height/rect/propertypropertynametextstring按钮/string/property/widget/widgetresources/connections//ui那么此时我们在点击左侧的编辑进入ui文件中查看对应的xml很明显如上在ui文件记录了当前编辑的样式那么后续就会根据ui文件生成C代码也就同时会把样式设置过去哇果然很方便但是如果我们界面上已经设置好的样式不符合我们的需求我们想要针对样式进行排查并且调整该如何做呢其实排查起来还挺麻烦由于Qt中样式的设置太过灵活有很多地方都可以进行设置这就导致当某个控件的样式不符合预期的时候排查起来就比较麻烦那么我们排查的时候排查顺序如下1全局样式QApplication设置的2指定控件的样式这个控件是否设置了样式3指定控价的父控件的样式因为有可能当前控件的样式是从父控件继承过来的4qss文件中的样式5ui文件中的样式所以如上排查起来还是比较麻烦的尤其是在业务场景比较复杂的情况下此时样式代码也会很复杂排查起来就更麻烦所以在实际开发中如果需要设置样式我们最好统一使用一种方式来进行设置比如容易将样式代码放在qss文件中统一设置或者将样式代码放在ui文件中进行统一设置怎么方便怎么来当然最为方便的还是将样式代码放在ui文件中进行统一设置总结以上就是今天的博客内容啦希望对读者朋友们有帮助水滴石穿坚持就是胜利读者朋友们可以点个关注点赞收藏加关注找到小编不迷路
