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;
}