pythonGUI库图形界⾯开发之PyQt5美化窗体与控件（异形窗
体）实例
这篇⽂章主要介绍了python GUI库图形界⾯开发之PyQt5美化窗体与控件(异形窗体)实例，需要的朋友可以参考下
在默认情况下，我们使⽤PyQt5创建出来的窗⼝和部件都是默认的样式，虽然谈不上很丑，但是也毫⽆美感可⾔。其实，在PyQt5中，我们可以有较⾼的⾃由度来⾃定义窗⼝和各种⼩部件的样式，通过⾃定义这些样式，以达到美化图形界⾯的⽬的。
本篇⽂章中，我们就通过⼀个实际的例⼦，使⽤QSS和PyQt5的配置属性，实现图形⽤户界⾯的美化⼯作。
⾸先上效果图：
⼀、对界⾯进⾏布局和组件的布置
在图像界⾯编程中，⼀个好的布局有助于全局把控界⾯的形态，⽽在PyQt5中，有多种布局的⽅式供我们选择，⽐较常⽤的布局有以下⼏种：
表单布局：QFormLayout
⽹格布局：QGridLayout
⽔平排列布局：QHBoxLayout
垂直排列布局：QVBoxLayout
每种布局都有⾃⼰对布局内⼩部件的控制⽅式和特点，在此我们选择⽹格布局作为本次图形界⾯布局的⽅案。
在⽹格布局内，使⽤两个QWidget()部件分别作为左侧菜单模块的部件和右侧内容模块的部件。所以这个图形界⾯的最基本结构代码如下所⽰：
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35# coding:utf-8
from PyQt5 import QtCore,QtGui,QtWidgets
import sys
import qtawesome
class MainUi(QtWidgets.QMainWindow):
def__init__(self):
super().__init__()
self.init_ui()
def init_ui(self):
self.setFixedSize(960,700)
self.main_widget =QtWidgets.QWidget() # 创建窗⼝主部件
self.main_layout =QtWidgets.QGridLayout() # 创建主部件的⽹格布局
self.main_widget.setLayout(self.main_layout) # 设置窗⼝主部件布局为⽹格布局
self.left_widget =QtWidgets.QWidget() # 创建左侧部件
self.left_widget.setObjectName('left_widget')
self.left_layout =QtWidgets.QGridLayout() # 创建左侧部件的⽹格布局层
self.left_widget.setLayout(self.left_layout) # 设置左侧部件布局为⽹格
self.right_widget =QtWidgets.QWidget() # 创建右侧部件
self.right_widget.setObjectName('right_widget')
self.right_layout =QtWidgets.QGridLayout()
self.right_widget.setLayout(self.right_layout) # 设置右侧部件布局为⽹格
self.main_layout.addWidget(self.left_widget,0,0,12,2) # 左侧部件在第0⾏第0列，占8⾏3列 self.main_layout.addWidget(self.right_widget,0,2,12,10) # 右侧部件在第0⾏第3列，占8⾏9列 self.setCentralWidget(self.main_widget) # 设置窗⼝主部件
def main():
app =QtWidgets.QApplication(sys.argv)
gui =MainUi()
gui.show()
<_())
35
36 37 38 39if__name__ =='__main__': main()
运⾏代码，呈现出来的图形界⾯如下图所⽰：
空空荡荡，下⾯我们就开始往⾥⾯填充⼩部件。
左侧菜单栏
在左侧菜单模块中，继续使⽤⽹格对部件进⾏布局。在左侧菜单的布局中添加按钮部件QPushButton()左侧菜单的按钮、菜单列提⽰和整个窗⼝的最⼩化和关闭按钮。
在MainUi()类的init_ui()⽅法中，使⽤如下代码实例化创建按钮：
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30self.left_close =QtWidgets.QPushButton("") # 关闭按钮
self.left_visit =QtWidgets.QPushButton("") # 空⽩按钮
self.left_mini =QtWidgets.QPushButton("") # 最⼩化按钮
self.left_label_1 =QtWidgets.QPushButton("每⽇推荐")
self.left_label_1.setObjectName('left_label')
self.left_label_2 =QtWidgets.QPushButton("我的⾳乐")
self.left_label_2.setObjectName('left_label')
self.left_label_3 =QtWidgets.QPushButton("联系与帮助")
self.left_label_3.setObjectName('left_label')
self.left_button_1 =QtWidgets.QPushButton(qtawesome.icon('fa.music',color='white'),"华语流⾏") self.left_button_1.setObjectName('left_button')
self.left_button_2 =QtWidgets.QPushButton(qtawesome.icon('fa.sellsy',color='white'),"在线FM") self.left_button_2.setObjectName('left_button')
self.left_button_3 =QtWidgets.QPushButton(qtawesome.icon('fa.film',color='white'),"热门MV") self.left_button_3.setObjectName('left_button')
self.left_button_4 =QtWidgets.QPushButton(qtawesome.icon('fa.home',color='white'),"本地⾳乐") self.left_button_4.setObjectName('left_button')
self.left_button_5 =QtWidgets.QPushButton(qtawesome.icon('fa.download',color='white'),"下载管理") self.left_button_5.setObjectName('left_button')
self.left_button_6 =QtWidgets.QPushButton(qtawesome.icon('fa.heart',color='white'),"我的收藏") self.left_button_6.setObjectName('left_button')
self.left_button_7 =QtWidgets.QPushButton(qtawesome.icon('fament',color='white'),"反馈建议") self.left_button_7.setObjectName('left_button')
self.left_button_8 =QtWidgets.QPushButton(qtawesome.icon('fa.star',color='white'),"关注我们") self.left_button_8.setObjectName('left_button')
self.left_button_9 =QtWidgets.QPushButton(qtawesome.icon('fa.question',color='white'),"遇到问题") self.left_button_9.setObjectName('left_button')
self.left_xxx =QtWidgets.QPushButton(" ")
在这⾥，我们使⽤qtawesome这个第三⽅库来实现按钮中的Font Awesome字体图标的显⽰。然后将创建的按钮添加到左侧部件的⽹格布局层中：
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15self.left_layout.addWidget(self.left_mini, 0, 0,1,1) self.left_layout.addWidget(self.left_close, 0, 2,1,1) self.left_layout.addWidget(self.left_visit, 0, 1, 1, 1) self.left_layout.addWidget(self.left_label_1,1,0,1,3) self.left_layout.addWidget(self.left_button_1, 2, 0,1,3) self.left_layout.addWidget(self.left_button_2, 3, 0,1,3) self.left_layout.addWidget(self.left_button_3, 4, 0,1,3) self.left_layout.addWidget(self.left_label_2, 5, 0,1,3) self.left_layout.addWidget(self.left_button_4, 6, 0,1,3) self.left_layout.addWidget(self.left_button
_5, 7, 0,1,3) self.left_layout.addWidget(self.left_button_6, 8, 0,1,3) self.left_layout.addWidget(self.left_label_3, 9, 0,1,3) self.left_layout.addWidget(self.left_button_7, 10, 0,1,3) self.left_layout.addWidget(self.left_button_8, 11, 0,1,3) self.left_layout.addWidget(self.left_button_9, 12, 0, 1, 3)
继续运⾏程序代码，呈现出来的图形界⾯如下图所⽰：
虽然很丑，但是基本的模型是显⽰出来了，这⾥先不作美化，先把完整的结构搭建出来。下⾯开始右侧部件的搭建。
右侧内容模块
在右侧内容模块中，有以下⼏个主要内容模块：
搜索模块
推荐⾳乐模块
⾳乐列表模块
⾳乐歌单模块
⾳乐播放进度模块
⾳乐播放控制模块
在搜索模块中，有⼀个⽂本和⼀个搜索框，我们通过QLable()部件和QLineEdit()部件来实现，这两个部件同时包裹在⼀个⽹格布局的QWidget()部件，分列第⼀列和第⼆列，其代码如下所⽰：
1 2 3 4 5 6 7 8 9 10 11 12self.right_bar_widget =QtWidgets.QWidget() # 右侧顶部搜索框部件
self.right_bar_layout =QtWidgets.QGridLayout() # 右侧顶部搜索框⽹格布局
self.right_bar_widget.setLayout(self.right_bar_layout)
self.search_icon =QtWidgets.QLabel(chr(0xf002) +' '+'搜索 ')
self.search_icon.setFont(qtawesome.font('fa', 16))
self.right_bar_widget_search_input =QtWidgets.QLineEdit()
self.right_bar_widget_search_input.setPlaceholderText("输⼊歌⼿、歌曲或⽤户，回车进⾏搜索") self.right_bar_layout.addWidget(self.search_icon,0,0,1,1)
self.right_bar_layout.addWidget(self.right_bar_widget_search_input,0,1,1,8)
self.right_layout.addWidget(self.right_bar_widget, 0, 0, 1, 9)
运⾏程序代码，其呈现的图形界⾯如下图所⽰：
然后是推荐⾳乐模块，在推荐⾳乐模块中，有⼀个推荐的标题，和⼀个横向排列的⾳乐封⾯列表，在这⾥：推荐标题使⽤QLable()来实现；
⾳乐封⾯列表由多个QToolButton()组成，其继续由⼀个布局为QGridLayout()的QWidget()部件所包含。
所以，其代码为：
1
2
3
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26self.right_recommend_label =QtWidgets.QLabel("今⽇推荐")
self.right_recommend_label.setObjectName('right_lable')
self.right_recommend_widget =QtWidgets.QWidget() # 推荐封⾯部件
self.right_recommend_layout =QtWidgets.QGridLayout() # 推荐封⾯⽹格布局
self.right_recommend_widget.setLayout(self.right_recommend_layout)
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 end_button_4.setText("荣耀征战")
self.right_recommend_layout.end_button_2,0,1)
self.right_recommend_layout.end_button_3, 0, 2)
self.right_recommend_layout.end_button_4, 0, 3)
self.right_recommend_layout.end_button_5, 0, 4)
self.right_layout.addWidget(self.right_recommend_label, 1, 0, 1, 9)
self.right_layout.addWidget(self.right_recommend_widget, 2, 0, 2, 9)
继续运⾏程序代码，得到的图形界⾯如下图所⽰：
接着创建⾳乐列表模块和⾳乐歌单模块。⾳乐列表模块和⾳乐歌单模块都有⼀个标题和⼀个⼩部件来容纳具体的内容。
其中标题我们都使⽤QLabel()部件来实现，⽽⾳乐列表我们使⽤⽹格布局的QWidget()部件下包裹着数个QPushButton()按钮部件来实现，⾳乐歌单列表则使⽤⽹格布局的QWidget()部件下包裹着数个QToolButton()⼯具按钮部件来实现。
⾳乐列表的具体代码如下所⽰：
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22self.right_newsong_lable =QtWidgets.QLabel("最新歌曲")
self.right_newsong_lable.setObjectName('right_lable')
self.right_playlist_lable =QtWidgets.QLabel("热门歌单")
self.right_playlist_lable.setObjectName('right_lable')
self.right_newsong_widget =QtWidgets.QWidget() # 最新歌曲部件
self.right_newsong_layout =QtWidgets.QGridLayout() # 最新歌曲部件⽹格布局
self.right_newsong_widget.setLayout(self.right_newsong_layout)
self.right_newsong_layout.wsong_button_2, 1, 1, )
self.right_newsong_layout.wsong_button_3, 2, 1, )
self.right_newsong_layout.wsong_button_4, 3, 1, )
self.right_newsong_layout.wsong_button_5, 4, 1, )
self.right_newsong_layout.wsong_button_6, 5, 1, )
⾳乐歌单模块的代码如下所⽰：1
app开发实例2
3 4 5 6 7 8 9 10 11 12 13 14self.right_playlist_widget =QtWidgets.QWidget() # 播放歌单部件
self.right_playlist_layout =QtWidgets.QGridLayout() # 播放歌单⽹格布局self.right_playlist_widget.setLayout(self.right_playlist_layout)
self.playlist_button_1 =QtWidgets.QToolButton()
self.playlist_button_1.setText("⽆法释怀的整天循环⾳乐…")
self.playlist_button_1.setIcon(QtGui.QIcon('./p1.jpg'))
self.playlist_button_1.setIconSize(QtCore.QSize(100, 100))
self.playlist_button_1.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) self.playlist_button_2 =QtWidgets.QToolButton()
self.playlist_button_2.setText("不需要歌词，也可以打动你的⼼")
self.playlist_button_2.setIcon(QtGui.QIcon('./p2.jpg'))
self.playlist_button_2.setIconSize(QtCore.QSize(100, 100))
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32self.playlist_button_2.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) self.playlist_button_3 =QtWidgets.QToolButton()
self.playlist_button_3.setText("那些你熟悉⼜不知道名字…")
self.playlist_button_3.setIcon(QtGui.QIcon('./p3.jpg'))
self.playlist_button_3.setIconSize(QtCore.QSize(100, 100))
self.playlist_button_3.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) self.playlist_button_4 =QtWidgets.QToolButton()
self.playlist_button_4.setText("那些只听前奏就中毒的英⽂歌")
self.playlist_button_4.setIcon(QtGui.QIcon('./p4.jpg'))
self.playlist_button_4.setIconSize(QtCore.QSize(100, 100))
self.playlist_button_4.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) self.right_playlist_layout.addWidget(self.playlist_button_1,0,0)
self.right_playlist_layout.addWidget(self.playlist_button_2, 0, 1)
self.right_playlist_layout.addWidget(self.playlist_button_3, 1, 0)
self.right_playlist_layout.addWidget(self.playlist_button_4, 1, 1)
然后将它们添加到右侧布局层中：
1 2 3 4self.right_layout.addWidget(self.right_newsong_lable, 4, 0, 1, 5) self.right_layout.addWidget(self.right_playlist_lable, 4, 5, 1, 4) self.right_layout.addWidget(self.right_newsong_widget, 5, 0, 1, 5) self.right_layout.addWidget(self.right_playlist_widget, 5, 5, 1, 4)
继续运⾏程序代码，显⽰出来的图形界⾯如下图所⽰：
这样，基本上能够看得出来图形界⾯的模样了，还差最后的⾳乐播放进度条和⾳乐播放控制按钮组。
⾳乐播放进度条我们使⽤QProgressBar()进度条部件来实现，⾳乐播放控制按钮组则使⽤⼀个QWidget()部件下包裹着三个QPushButton()按钮部件来实现。
其具体代码如下：
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21self.right_process_bar =QtWidgets.QProgressBar() # 播放进度部件
self.right_process_bar.setValue(49)
self.right_process_bar.setFixedHeight(3) # 设置进度条⾼度
self.right_process_bar.setTextVisible(False) # 不显⽰进度条⽂字
self.right_playconsole_widget =QtWidgets.QWidget() # 播放控制部件
self.right_playconsole_layout =QtWidgets.QGridLayout() # 播放控制部件⽹格布局层
self.right_playconsole_widget.setLayout(self.right_playconsole_layout)
self.right_playconsole_layout.sole_button_1, 0, 0)
self.right_playconsole_layout.sole_button_2, 0, 2)
self.right_playconsole_layout.sole_button_3, 0, 1)
self.right_playconsole_layout.setAlignment(QtCore.Qt.AlignCenter) # 设置布局内部件居中显⽰
self.right_layout.addWidget(self.right_process_bar, 9, 0, 1, 9)
self.right_layout.addWidget(self.right_playconsole_widget, 10, 0, 1, 9)
最后运⾏程序代码，我们就得到了这个图形界⾯的完整部件的形态，其如下图所⽰：
完成了基本的图形界⾯⼩部件的搭建，接下来，我们可以对这个图形界⾯进⾏⼀下美化了，因为现在的这个样⼦实在是很丑陋很不好看。⼆、使⽤QSS和部件属性美化窗⼝部件
QSS全称为Qt StyleSheet，是⽤来控制QT控件的样式表。其和Web前段开发中的CSS样式表类似，接下来，我们就通过QSS来对上⾯创建好的图形界⾯进⾏美化。
窗⼝控制按钮
发表评论