温故而知新---PyQt5学习笔记系列---特效！QSS！

wei_Y

Qt上的控件一般都比较难看。。真的，不信你看，

这样的颜值已经不足以取悦大众了！！但是在designer上并没有发现任何可以修改他样式的地方。
这让人有点失望，Qt咋连样式都改不了，这到底是什么$^%$%^$%^$%#$%!!

0.  QSS！
原来Qt借鉴CSS的思路，让Qt也使用类似CSS的结构。让界面和美化分离。QSS也和CSS差不多。(CSS应该功能更强大些。)
OK，能美化就好嘛~。

1.  QSS怎么玩？
窗口部件里有个函数，专门设置样式。

1. self.setStyleSheet("")

复制代码

设置样式表，奏是辣么直接。
它接受字符串，估计二进制的不接受。
让我们敲上他走起~！

1. import sys
   
2. from PyQt5.QtWidgets import *
   
3. from PyQt5.QtGui import *
   
4. 
   
5. 
   
6. class Main(QWidget):
   
7.     def __init__(self, parent=None):
   
8.         super(Main, self).__init__(parent)
   
9.         self.setObjectName('main')
   
10.         self.setWindowTitle('Hello Qt')
    
11.         self.setWindowIcon(QIcon('../pic/e.jpg'))
    
12.         self.resize(300, 300)
    
13.         self.setStyleSheet("")
    
14. 
    
15. 
    
16. if __name__ == '__main__':
    
17.     app = QApplication(sys.argv)
    
18.     main = Main()
    
19.     main.show()
    
20.     sys.exit(app.exec_())

复制代码

呃，好像并没有什么变化！( 特么废话，啥也没设置会出现啥变化。)


2.  咱也是有背景的窗口！
让我们首先创建一只QSS文件，window.qss(其实不用.qss后缀，正常编码的文件都可以。神马.txt .py .gif .avi .rmvb只不过这些看起来好混淆了，用QSS也可以让其他人知道这文件是个啥。)

好啦，话不多说写上几行试试手。

1. QWidget#main{
   
2.     background: black;
   
3. }

复制代码

#代表某控件的名字，就是setObjectName设置的那个名字。如果不设置会给所有的这个控件都设置这个效果。

让我们走起。


哎？你说你的还是个白框？那你肯定忘了

1.         with open('window.qss', 'r') as q:
   
2.             self.setStyleSheet(q.read())

复制代码

关于颜色代码问题，请百度 颜色代码。( 要不你#000000-#FFFFFF一个个试也可以。)关于颜色搭配问题，请百度  颜色搭配。

3.  图片！颜色神马的根本彰显不了本窗口的地位！

1. QWidget#main{
   
2.     background-image: url(../pic/e.jpg);
   
3. }

复制代码

但是并没有期望的图片出现。(路径打错除外，图片没有除外。)

那是因为QWidget创建的窗口并不会有图片，不过他的子窗口都会继承这个图片(不指定名字的话)。至于QWidget为毛不能设置上图片，原因不清楚。。

目前找到两种方法解决这个问题。
第一个是换一个继承类。
窗口部件还有QMainWindow可以用，也可以继承QFrame。
第二个是在QWidget中添加一个QFrame让QFrame覆盖住QWidget。然后其他东西在QFrame上写。
不过这样不如直接继承QFrame。


那改成QFrame类:

1. import sys
   
2. from PyQt5.QtWidgets import *
   
3. from PyQt5.QtGui import *
   
4. 
   
5. 
   
6. class Main(QFrame):
   
7.     def __init__(self, parent=None):
   
8.         super(Main, self).__init__(parent)
   
9.         self.setObjectName('main')
   
10.         self.setWindowTitle('Hello Qt')
    
11.         self.setWindowIcon(QIcon('../pic/e.jpg'))
    
12.         self.resize(658, 658)
    
13.         with open('window.qss', 'r') as q:
    
14.             self.setStyleSheet(q.read())
    
15. 
    
16. 
    
17. if __name__ == '__main__':
    
18.     app = QApplication(sys.argv)
    
19.     main = Main()
    
20.     main.show()
    
21.     sys.exit(app.exec_())

复制代码

如果是空白请检查是否存在此图片，路径是否正确。
../表示相对于这层目录的上层，如果是在本层目录下就什么都不要加，否则会变成根目录。

4.  关于背景的其他属性。
background-position:   设置背景的位置。top bottom left right 可组合使用。
background-repeat:
   设置背景是否可以重复。 repeat-x可横向重复沿x轴，repeat-y可纵向重复沿y轴，repeat可沿x，y轴重复，no-repeat不可重复。默认是repeat。选个小点的背景图再把窗口弄大点可看到效果。
background-origin:
   设置背景的组织。   margin 外边距  border 边框  padding 内边距 content 内容部分。
background-attachment:
   设置背景附件。    scroll 滚动，fixed填充。这在一个滚动的区域是让背景图片(一般是图片，颜色的话看不出来。)是让他滚动还是不滚。
background-clip:
   这个具体属性貌似和origin一样，效果没试过，英语渣看的也不是太懂，附上原文。

1. The widget's rectangle, in which the background is drawn.
   
2. This property specifies the rectangle to which the background-color and background-image are clipped.
   
3. This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QDialog, QFrame, QGroupBox, QLabel, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, and plain QWidgets.
   
4. If this property is not specified, the default is border.

复制代码

渣翻译:
这个矩形控件(不知道为啥叫矩形还是说翻译的不对，还是另有深意，知道的说下啦。)，是在有背景的情况下使用的。
这个属性指示这个矩形的背景颜色和背景图片修剪样子。
这个属性支持QAbstractItemView的子类，QAbstractSpinBox的子类，QCheckBox，QComboBox, QDialog, QFrame, QGroupBox, QLabel,
QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, 和绘画控件。
如果这个属性不被指示，那么默认为边框。

Q:  你在哪找的这玩意？
A:  官方文档: 点我

Q:  有中文版么?
A:  或许以后会有。。

Q:  有木有视频教程？
A:  可以看看css，基本差不多应该。。

lightninng

你玩的东西都好高档的说~


话说，下面那个background-clip我理解的意思是不是你设置了background-origin之后背景会空出一部分来，那部分的填充用background-clip设置的东西填充啊？

小人

真是帅到没朋友

wei_Y

lightninng 发表于 2015-5-15 22:20
你玩的东西都好高档的说~

Qt高档。
这个没试过。。
我一般设置个颜色- -。。剩下的那些对于颜色来说基本没啥区别。。

freeparty

学的真好

ft3312591

这个不错，最好出个详细点的教程，方便模仿

james007

教程不错，就是太少了点，没法继续发挥，看英文太费神，渣英文

mokoaoda

没错

xiao1yu

好高端的感觉=。=

mrjliu

钱不够了,下不了了:L

mrjliu

感谢楼主分享

1012662902

强烈支持楼主ing...

～风介～

会了这个， 我也能写出狂拽酷炫叼的界面了——新技能get！@wei_Y

ZZWZZ

有没有直接一点的，设计一个软件