Qt中QSS的简单使用

样式表的组成

样式表由两大元素组成：选择器和声明。选择器实际上可以理解为对象，声明则是对该对象的属性的设置。

样式表的使用

方法一：在代码中调用setStyleSheet()来设置样式；
方法二：通过加载qss文件来设置样式。

样式表的简单使用介绍

setStyleSheet()的简单应用：
【1】通过QApplication的对象调用；
（1）创建QSS文件——myqss.qss;
创建文本文件，存入源文件所在的同级目录下，修改其文件名为myqss.qss。
（2）用QtCreate打开该工程，在项目名上右键点击添加新文件，选择Qt资源文件，按照提示创建资源文件；
（3）在创建的资源文件上右键选择添加前缀，之后添加该项目所用到的资源文件，即图片，添加之后保存；
（4）在main.cpp文件中添加如下代码。

#include <QApplication> #include <QFile> int main(int argc,char *argv[]) {QApplication app(argc,argv);QFile file(".\myqss.qss");/*QSS文件所在的路径*/file.open(QIODevice::ReadOnly);if(file.isOpen()){QString strFile = file.readAll();app.setStyleSheet(strFile);file.close();/*记得关闭QSS文件*/}return app.exec(); }

备注：
此方法通过在主函数中读取QSS文件，来设置界面的样式，可以将整个项目中各界面对应的样式设置都都在一个QSS文件下

qss文件的大体介绍

只有一个界面的QSS文件
内容形式：控件类名#objectName{ … }
如只有一个界面，界面上有一个QPushButton控件，在其对应的qss文件中可以编写其内容为下：

/*创建应用程序，基类为QWidget,在其ui文件中将QWidget的objectName更改为WidgetPainter，拖入控件QPushButton将其ObjectName更改为pushButtonPainter，现在qss文件中设置按钮的样式，按钮未被点击的状态和按钮被点击的状态*/ /*画笔未被点击*/ QWidget#WidgetPainter>QPushButton#pushButtonPainter{background-color:transparent;image:url(:/image/painterUnchecked.png); }/*画笔被点击*/ QWidget#WidgetPainter>QPushButton#pushButtonPainter:pressed{background-color:transparent;image:url(:/image/painterChecked.png); }

因为整个应用程序只有一个界面，可以将整个项目中所有控件的样式设置都写到一个qss文件中，在main函数中加载qss文件，给界面设置样式。
2. 多界面的QSS文件
可以将每一个界面写一个qss文件，然后在各界面对应的类中的构造函数里加载qss文件；也可以将所有界面的样式设置写到一个qss文件中，在main函数中加载qss文件。

/*将信号源名字界面与系统设置界面的样式设置写道同一个qss文件中，对于部件间关系的归属必须锊清，否则会达不到预想的界面效果，下面是在一个QWidget(objectName为SignalSource)上拖入一个QWidget(objectName为widget_title)，再在objectName为widget_title的QWidget上拖入标签QLabel和按钮QPushButton,即QLabel和QPushButton为widget_title的直接子部件，widget_title为SignalSource的直接子部件，之间子部件之间使用>,控件类与控件的名称之间使用#，*/ /***************************信号源名字子页面**************/ /*页面的背景*/ QWidget#SignalSource{background-color:#FF2D3274; }/*页面标题栏*/ QWidget#SignalSource>QWidget#widget_title{background-color:#FF262B63; }/*信号源的名字*/ QWidget#widget_title>QLabel#label_name{color: rgb(255, 255, 255);font-size:16px;font-family:Microsoft YaHei; }/*控制按钮*/ QWidget#widget_title>QPushButton#pushButton_control{background-color:transparent;image:url(:/new/prefix1/images/contrl.png);border-style:flat; }/*控制按钮被点击状态*/ QWidget#widget_title>QPushButton#pushButton_control:checked{image:url(:/new/prefix1/images/finishControl.png); }/*上屏按钮*/ QWidget#widget_title>QPushButton#pushButton_upscr{background-color:transparent;image:url(:/new/prefix1/images/upsrc.png);border-style:flat; }/*上屏按钮被点击状态*/ QWidget#widget_title>QPushButton#pushButton_upscr:checked{image:url(:/new/prefix1/images/downscr.png); }/*设置按钮*/ QWidget#widget_title>QPushButton#pushButton_set{ background-color:transparent;image:url(:/new/prefix1/images/seting.png);border-style:flat; }/*设置按钮鼠标按下状态*/ QWidget#widget_title>QPushButton#pushButton_set:checked{image:url(:/new/prefix1/images/seting2.png); }/*全屏按钮*/ QWidget#widget_title>QPushButton#pushButton_fullscr{background-color:transparent;image:url(:/new/prefix1/images/fullscr.png);border-style:flat; }/*全屏按钮鼠标按下状态*/ QWidget#widget_title>QPushButton#pushButton_fullscr:checked{image:url(:/new/prefix1/images/fullsrc2.png); }/*******************系统设置****************/ /*整体窗口背景#FF2E3274*/ QDialog#SystemSet{background-color:#FF2E3274; /* box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);*/border-radius: 5px 5px 5px 5px; }/*窗体头背景*/ QDialog#SystemSet>QWidget#widget_title{background-color:#FF262B63; }/*系统设置标题*/ QWidget#widget_title>QLabel#label_title{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; }/*系统设置图标*/ QWidget#widget_title>QLabel#label_sysSet{background-color:transparent;image:url(:/new/prefix1/images/sysset.png); }/*默认设置按钮*/ QWidget#widget_title>QPushButton#pushButton_defaultset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color:#FF282C66;border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat; }/*默认设置按钮被点击*/ QWidget#widget_title>QPushButton#pushButton_defaultset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px; }/*默认设置按钮旁边白线*/ QWidget#widget_title>QLabel#label1{background-color:#FFFFFF; border-radius: 1px; opacity: 0.5; }/*高级设置按钮*/ QWidget#widget_title>QPushButton#pushButton_advanceset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color: #FF282C66;border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat; }/*高级设置按钮被点击*/ QWidget#widget_title>QPushButton#pushButton_advanceset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px; }/*高级设置按钮旁边白线*/ QWidget#widget_title>QLabel#label2{background-color:#FFFFFF; border-radius: 1px; opacity: 0.5; }/*ip设置按钮*/ QWidget#widget_title>QPushButton#pushButton_ipset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color: #FF282C66; border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat; }/*ip设置按钮被点击*/ QWidget#widget_title>QPushButton#pushButton_ipset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px; }QWidget>QPushButton#pushButton_close{background-color:transparent;image:url(:/new/prefix1/images/close.png); }

以上是对QSS使用过程中的一些简单的总结。涉及更多的内容还需自己挖掘，个人理解在多界面共用一个qss文件时，部件之间关系十分重要。
在使用图片作为整个界面的背景图片时，需要在QWidget中拖入一个QWidget，在拖入的QWidget中设置背景透明，背景图片，并且需要将整个界面的QWidget设置为透明，无标题，否则达不到想要的效果
如下面的qss文件中所写：

/*提示窗口的整体需要加载一张图片，先在QDialog中拖入控件QWidget(objectName为widget)，在程序设置QDialog的没有标题和背景透明，在qss文件中编写widget背景透明，加载背景图片*/ /****************通知提示窗口*************/ /*界面的整体背景rgba(0,255,255,255)*/ QDialog#InformDialog>QWidget#widget{ background-color:transparent;background-image:url(:/new/prefix1/images/informbackground.png); }

image,backgroun-image,border-image的区别，image的不会改变图片的大小，不会拉伸和压缩图片，backgroun-image一般用于整个控件的背景图片，无法随部件的大小自动缩放，border-image为可以随部件的大小自动缩放

子部件的样式设置

控件的子控件设置样式简单的贴一些自己之前做过的，更多还需自己学习。

/*QComboBox控件的子部件的简单设置下拉的界面，下拉界面每一项，下拉按钮的样式，QSpinBox,QCheckBox,QRadioButton子部件的设置*/ /*下拉按钮*/ QWidget#systemdefaltSet>QComboBox{ background-color: #121650;border-radius: 6px;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; }/*下拉按钮*/ QWidget#systemdefaltSet>QComboBox::down-arrow{ image:url(:/new/prefix1/image/comboxDown.png); }/*下拉按钮隐藏边框*/ QWidget#systemdefaltSet>QComboBox::drop-down{ border:none;top:4px;left:-15px; }/*下拉窗体*/ QWidget#systemdefaltSet>QComboBox QAbstractItemView{ background-color:#55557f;outline: 1px solid #ffaa7f; /* 选定项的虚框 */selection-background-color:#121650;color:#FFFFFF; }/*下拉窗体每一项*/ QWidget#systemdefaltSet>QComboBox QAbstractItemView::item{ height:50px; } /*行列按钮最初形态#spinBoxrow*/ advanceSet>QSpinBox{ background-color: #12164F;border-radius: 6px; font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; }/*行列按钮被点击之后整体轮廓设置*/ advanceSet>QSpinBox:pressed{ background-color: #121650;border: 1px solid #00FFFF;border-radius: 6px; }/*行列按钮上箭头没有被点击的状态:unchecked*/ advanceSet>QSpinBox::up-button{ image:url(:/new/prefix1/image/spinupbtnUnchecked.png); }/*行列按钮下箭头没有被点击的状态:unchecked*/ advanceSet>QSpinBox::down-button{ image:url(:/new/prefix1/image/spindownbtnUnchecked.png); }/*行列按钮上箭头被点击的状态*/ advanceSet>QSpinBox::up-button:pressed{ image:url(:/new/prefix1/image/spinupbtnChecked.png); border:none; }/*行列按钮下箭头被点击的状态*/ advanceSet>QSpinBox::down-button:pressed{ image:url(:/new/prefix1/image/spindownbtnChecked.png); border:none; }/*此界面上所有的单选按钮最初状态*/ advanceSet>QRadioButton{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; }/*此界面上所有的单选按钮的子部件的最初状态（未点击状态）*/ advanceSet>QRadioButton::indicator{image:url(:/new/prefix1/image/radioUnchecked.png); }/*此界面上所有的单选按钮的子部件的被点击后的状态（点击状态）*/ advanceSet>QRadioButton::indicator:checked{image:url(:/new/prefix1/image/radioChecked.png); }/*此界面上所有的复选框最初时的状态*/ advanceSet>QCheckBox{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; }/*此界面上所有的复选框子部件未被点击时的状态*/ advanceSet>QCheckBox::indicator{background-color:transparent;image:url(:/new/prefix1/image/checkbtnUnchecked.png); }/*此界面上所有的复选框子部件被点击时的状态*/ advanceSet>QCheckBox::indicator:checked{image:url(:/new/prefix1/image/checkbtnChecked.png); }

多个相同类型的控件的样式相同

若同一类型的控件的样式要求一致，可以一起设置。

界面上有多个相同类型的控件，但是有几个控件的样式要求一致，可以采取如下设置；

/*界面中还有其它的QPushButton，但是有两个QPushButton的样式设置要求一致，可以一起设置*/ /*确定按钮,取消按钮*/ QWidget#widget>QPushButton#pushButton_confirm,QPushButton#pushButton_cancel{ font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;background-color:#FF080C3E; border: 1px solid #FFFFFF;border-radius: 6px; }/*确定按钮,取消按钮被点击状态*/ QWidget#widget>QPushButton#pushButton_confirm:pressed,QPushButton#pushButton_cancel:pressed{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #000438; background-color: #00FFFF;opacity: 0.9;border-radius: 6px; }

2.若界面上所有同一类型的控件的样式都要求设置一致，可以不用指明控件名称，直接设置。

/*界面上所有的QPushButton控件的样式一致*/ InformDialog>QPushButton{color:#FFFFFF;background-color:#FF2D3274;border: 1px solid #FFFFFF;border-radius: 6px; }/*取消按钮被点击状态*/ InformDialog>QPushButton:pressed{background-color: #008AFF;border-radius: 6px; }

总结

以上是生活随笔为你收集整理的Qt中QSS的简单使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。