Qt中QSS的简单使用
样式表的组成
样式表由两大元素组成：选择器和声明。选择器实际上可以理解为对象，声明则是对该对象的属性的设置。
样式表的使用
方法一：在代码中调用setStyleSheet()来设置样式；
方法二：通过加载qss文件来设置样式。
样式表的简单使用介绍
setStyleSheet()的简单应用：
【1】通过QApplication的对象调用；
（1）创建QSS文件——myqss.qss;
创建文本文件，存入源文件所在的同级目录下，修改其文件名为myqss.qss。
（2）用QtCreate打开该工程，在项目名上右键点击添加新文件，选择Qt资源文件，按照提示创建资源文件；
（3）在创建的资源文件上右键选择添加前缀，之后添加该项目所用到的资源文件，即图片，添加之后保存；
（4）在main.cpp文件中添加如下代码。
#include
#include
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;
}