样式表的组成
样式表由两大元素组成:选择器和声明。选择器实际上可以理解为对象,声明则是对该对象的属性的设置。
样式表的使用
方法一:在代码中调用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");
file.open(QIODevice::ReadOnly);
if(file.isOpen())
{
QString strFile = file.readAll();
app.setStyleSheet(strFile);
file.close();
}
return app.exec();
}
备注:
此方法通过在主函数中读取QSS文件,来设置界面的样式,可以将整个项目中各界面对应的样式设置都都在一个QSS文件下
qss文件的大体介绍
- 只有一个界面的QSS文件
内容形式:控件类名#objectName{ … }
如只有一个界面,界面上有一个QPushButton控件,在其对应的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文件。
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);
}
QDialog#SystemSet{
background-color:#FF2E3274;
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;
}
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;
}
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#InformDialog>QWidget#widget{
background-color:transparent;
background-image:url(:/new/prefix1/images/informbackground.png);
}
image,backgroun-image,border-image的区别,image的不会改变图片的大小,不会拉伸和压缩图片,backgroun-image一般用于整个控件的背景图片,无法随部件的大小自动缩放,border-image为可以随部件的大小自动缩放
子部件的样式设置
控件的子控件设置样式简单的贴一些自己之前做过的,更多还需自己学习。
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;
}
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;
}
advanceSet>QSpinBox::up-button{
image:url(:/new/prefix1/image/spinupbtnUnchecked.png);
}
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);
}
多个相同类型的控件的样式相同
若同一类型的控件的样式要求一致,可以一起设置。
- 界面上有多个相同类型的控件,但是有几个控件的样式要求一致,可以采取如下设置;
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.若界面上所有同一类型的控件的样式都要求设置一致,可以不用指明控件名称,直接设置。
InformDialog>QPushButton{
color:#FFFFFF;
background-color:#FF2D3274;
border: 1px solid #FFFFFF;
border-radius: 6px;
}
InformDialog>QPushButton:pressed{
background-color: #008AFF;
border-radius: 6px;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)