在默认情况下，我们使用PyQt5创建出来的窗口和部件都是默认的样式，虽然谈不上很丑，但是也毫无美感可言。其实，在PyQt5中，我们可以有较高的自由度来自定义窗口和各种小部件的样式，通过自定义这些样式，以达到美化图形界面的目的。
本篇文章中，我们就通过一个实际的例子，使用QSS和PyQt5的配置属性，实现图形用户界面的美化工作。
首先上效果图：
使用到的图片素材有9张音乐的封面图片：
需要素材的小伙伴可以在【州的先生】微信公众号（ID：zmister2016）回复关键词“0013”获取下载链接。
文章目录[显示]
一、对界面进行布局和组件的布置
在图像界面编程中，一个好的布局有助于全局把控界面的形态，而在PyQt5中，有多种布局的方式供我们选择，比较常用的布局有以下几种：
- 表单布局：QFormLayout
- 网格布局：QGridLayout
- 水平排列布局：QHBoxLayout
- 垂直排列布局：QVBoxLayout
每种布局都有自己对布局内小部件的控制方式和特点，在此我们选择网格布局作为本次图形界面布局的方案。
在网格布局内，使用两个QWidget()部件分别作为左侧菜单模块的部件和右侧内容模块的部件。所以这个图形界面的最基本结构代码如下所示：
# 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()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
运行代码，呈现出来的图形界面如下图所示：
空空荡荡，下面我们就开始往里面填充小部件。
左侧菜单栏
在左侧菜单模块中，继续使用网格对部件进行布局。在左侧菜单的布局中添加按钮部件QPushButton()左侧菜单的按钮、菜单列提示和整个窗口的最小化和关闭按钮。
在MainUi()类的init_ui()方法中，使用如下代码实例化创建按钮：
self.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('fa.comment',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字体图标的显示。然后将创建的按钮添加到左侧部件的网格布局层中：
self.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()部件，分列第一列和第二列，其代码如下所示：
self.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()部件所包含。
所以，其代码为：
self.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)
self.recommend_button_1 = QtWidgets.QToolButton()
self.recommend_button_1.setText("可馨HANM") # 设置按钮文本
self.recommend_button_1.setIcon(QtGui.QIcon('./r1.jpg')) # 设置按钮图标
self.recommend_button_1.setIconSize(QtCore.QSize(100,100)) # 设置图标大小
self.recommend_button_1.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) # 设置按钮形式为上图下文
self.recommend_button_2 = QtWidgets.QToolButton()
self.recommend_button_2.setText("那首歌")
self.recommend_button_2.setIcon(QtGui.QIcon('./r2.jpg'))
self.recommend_button_2.setIconSize(QtCore.QSize(100, 100))
self.recommend_button_2.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
self.recommend_button_3 = QtWidgets.QToolButton()
self.recommend_button_3.setText("伟大的渺小")
self.recommend_button_3.setIcon(QtGui.QIcon('./r3.jpg'))
self.recommend_button_3.setIconSize(QtCore.QSize(100, 100))
self.recommend_button_3.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
self.recommend_button_4 = QtWidgets.QToolButton()
self.recommend_button_4.setText("荣耀征战")
self.recommend_button_4.setIcon(QtGui.QIcon('./r4.jpg'))
self.recommend_button_4.setIconSize(QtCore.QSize(100, 100))
self.recommend_button_4.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
self.recommend_button_5 = QtWidgets.QToolButton()
self.recommend_button_5.setText("猎场合辑")
self.recommend_button_5.setIcon(QtGui.QIcon('./r5.jpg'))
self.recommend_button_5.setIconSize(QtCore.QSize(100, 100))
self.recommend_button_5.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
self.right_recommend_layout.addWidget(self.recommend_button_1,0,0)
self.right_recommend_layout.addWidget(self.recommend_button_2,0,1)
self.right_recommend_layout.addWidget(self.recommend_button_3, 0, 2)
self.right_recommend_layout.addWidget(self.recommend_button_4, 0, 3)
self.right_recommend_layout.addWidget