本文使用 Zhihu On VSCode 创作并发布
>qss是什么
qss的全称是 Qt Style Sheets. Qt样式表,用于美化Qt程序界面。语法和web美化的CSS很像,但是功能木有css 强大,只是能用,能满足美化的要求。
>qss怎么用
首先祭上官方参考文档 Qt Style Sheets Reference。有时间静心研读官方文档,就不用看我瞎BB了。有问题也是查官方文档,能找到宝藏。
我的使用习惯是新建一个style.qss
的文档,在这个文档中编写样式,然后在程序中加载样式表,加载的代码如下: 定义一个导入qss文件的函数,然后在主程序中调用这个函数。
# 定义导入函数
def LoadStyleFromQss(self, f):
file = open(f)
lines = file.readlines()
file.close()
res = ''
for line in lines:
res += line
return res
#调用函数
styleFile = os.getcwd() + 'style.qss'
self.setStyleSheet(str(self.LoadStyleFromQss(styleFile)))
然后就是结合自己的UI,根据qss语法来编写样式表了。
>qss语法
简单来说,每个qss语句由选择器
和一条或者多申明
构成,每条申明
都是键值对
的形式,键
是选择器
的属性
,值
是对这个属性的设置
。选择器放在{}
外面,生命在{}
里面,不同是声明设置之间用;
隔开。声明的键和值之间用:
分隔。
selector {declaration1; declaration2; ... declarationN }
举个栗子
注意:可以多个选择器对应一个申明语句 选择器之间用逗号隔开。
QPushButton,QLabel,QLineEdit {color:#222; background-color:#fff;}
有哪些选择器,以及能声明哪些属性,在官方的文档中详细的列了出来,是最好的参考。这里我总结我常用的选择器和属性。
选择器
声明
声明能控制哪些样式呢? 诚恳的说,qss正的木有css花样丰富,只能控制背景,边框,字体,图标,大小 位置等。但是我觉得这些用好了,能满足美化的需求。参考文档
注意
使用的时候要能理解css中的盒子模型,就懂设置样式的位置大小和边框了。
BB了这些不知道大家会不会用还是没
- 全局设置
*{
background:#f5f5f5;
font-size:18px;
color:#7A7A7A;
font-family:Microsoft YaHei
}
- 对按钮的设置 带点击和划过的效果
QPushButton{
background: #0088CC;
color:#fff;
border-style: outset;
border-radius: 5px;
}
QPushButton:pressed{
background-color:#49afcd;
color:#dedede;
border-style: inset;
}
QPushButton:hover{
background-color: #49afcd;
border-color: #5599ff;
}
- 下拉列表
QComboBox{
border: 1px solid #999999;
border-radius: 2px;
}
QComboBox:editable{
border-style: inset;
}
QComboBox:hover{
border-color: #EA2;
}
QComboBox:focus{
border-color: #EA2;
}
QComboBox:on {
padding-top: 2px;
padding-left: 2px;
}
QComboBox QAbstractItemView {
border: 1px solid #999999;
selection-background-color: #88BBFF;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 20px;
border-left-width: 1px;
border-left-color: darkgray;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow { /* 修改下拉按钮的箭头 */
image: url(image/arrow1.png);
}
学会了QSS怎么用并一定就能设计出很好看的GUI程序,只是掌握的设计的方法,重要的还是审美,多看其他人的UI设计,多思考这是怎么做出来的。 献上我看到大神做的比较好的UI设计给大家,供大家学习。
丑拒!如何在Python中编写精美图形界面mp.weixin.qq.com