qss qcombobox_qss使用总结

本文使用 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花样丰富，只能控制背景，边框，字体，图标，大小 位置等。但是我觉得这些用好了，能满足美化的需求。参考文档

Image

注意

使用的时候要能理解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