开通VIP，畅享免费电子书等14项超值服
首页
好书
留言交流
下载APP
联系客服
2020.05.22
在默认情况下，我们使用PyQt5创建出来的窗口和部件都是默认的样式，虽然谈不上很丑，但是也毫无美感可言。其实，在PyQt5中，我们可以有较高的自由度来自定义窗口和各种小部件的样式，通过自定义这些样式，以达到美化图形界面的目的。
首先上效果图：
使用到的图片素材有9张音乐的封面图片：
在图像界面编程中，一个好的布局有助于全局把控界面的形态，而在PyQt5中，有多种布局的方式供我们选择，比较常用的布局有以下几种：
每种布局都有自己对布局内小部件的控制方式和特点，在此我们选择网格布局作为本次图形界面布局的方案。
在网格布局内，使用两个QWidget()部件分别作为左侧菜单模块的部件和右侧内容模块的部件。所以这个图形界面的最基本结构代码如下所示：
空空荡荡，下面我们就开始往里面填充小部件。
在左侧菜单模块中，继续使用网格对部件进行布局。在左侧菜单的布局中添加按钮部件QPushButton()左侧菜单的按钮、菜单列提示和整个窗口的最小化和关闭按钮。
在MainUi()类的init_ui()方法中，使用如下代码实例化创建按钮：
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)运行程序代码，其呈现的图形界面如下图所示：
然后是推荐音乐模块，在推荐音乐模块中，有一个推荐的标题，和一个横向排列的音乐封面列表，在这里：
所以，其代码为：
接着创建音乐列表模块和音乐歌单模块。音乐列表模块和音乐歌单模块都有一个标题和一个小部件来容纳具体的内容。
其中标题我们都使用QLabel()部件来实现，而音乐列表我们使用网格布局的QWidget()部件下包裹着数个QPushButton()按钮部件来实现，音乐歌单列表则使用网格布局的QWidget()部件下包裹着数个QToolButton()工具按钮部件来实现。
音乐列表的具体代码如下所示：
self.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()按钮部件来实现。
其具体代码如下：
完成了基本的图形界面小部件的搭建，接下来，我们可以对这个图形界面进行一下美化了，因为现在的这个样子实在是很丑陋很不好看。
QSS全称为QtStyleSheet,是用来控制QT控件的样式表。其和Web前段开发中的CSS样式表类似，接下来，我们就通过QSS来对上面创建好的图形界面进行美化。
首先从左侧的菜单栏开始。
左侧的最顶端是三个窗口控制按钮，我们需要将其设置为小圆点的形式。首先，我们使用QPushButton()的setFixedSize()方法，设置按钮的大小：
self.left_close.setFixedSize(15,15)#设置关闭按钮的大小self.left_visit.setFixedSize(15,15)#设置按钮大小self.left_mini.setFixedSize(15,15)#设置最小化按钮大小然后，通过setStyleSheet()方法，设置按钮部件的QSS样式，在这里，左侧按钮默认为淡绿色，鼠标悬浮时为深绿色；中间按钮默认为淡黄色，鼠标悬浮时为深黄色；右侧按钮默认为浅红色，鼠标悬浮时为红色。所以它们的QSS样式设置如下所示：
self.left_close.setStyleSheet('''QPushButton{background:#F76677;border-radius:5px;}QPushButton:hover{background:red;}''')self.left_visit.setStyleSheet('''QPushButton{background:#F7D674;border-radius:5px;}QPushButton:hover{background:yellow;}''')self.left_mini.setStyleSheet('''QPushButton{background:#6DDF6D;border-radius:5px;}QPushButton:hover{background:green;}''')运行程序代码，可以发现三个控制按钮已经变成了比较美观的小圆点了：
因为最后的图形界面中，左侧的部件背景是灰色的，所以我们需要将左侧菜单中的按钮和文字颜色设置为白色，并且将按钮的边框去掉，在left_widget中设置qss样式为：
self.left_widget.setStyleSheet('''QPushButton{border:none;color:white;}QPushButton#left_label{border:none;border-bottom:1pxsolidwhite;font-size:18px;font-weight:700;font-family:"HelveticaNeue",Helvetica,Arial,sans-serif;}QPushButton#left_button:hover{border-left:4pxsolidred;font-weight:700;}''')右侧背景、搜索框和模块文本完成了左侧部件的美化之后，我们接着对右侧的内容部件进行处理，首先是顶部的搜索框，因为搜索框使用的是QLineEdit()部件，默认情况下棱角分明很是不好看，我们对其进行圆角处理：
self.right_bar_widget_search_input.setStyleSheet('''QLineEdit{border:1pxsolidgray;width:300px;border-radius:10px;padding:2px4px;}''')因为图形界面是会呈现出无边框的圆角形式，所以右侧的部件的右上角和右下角需要先行处理为圆角的，同时背景设置为白色。对推荐模块、音乐列表模块和音乐歌单模块的标题我们也需要对其字体进行放大处理，所以最后的样式为：
self.right_widget.setStyleSheet('''QWidget#right_widget{color:#232C51;background:white;border-top:1pxsoliddarkGray;border-bottom:1pxsoliddarkGray;border-right:1pxsoliddarkGray;border-top-right-radius:10px;border-bottom-right-radius:10px;}QLabel#right_lable{border:none;font-size:16px;font-weight:700;font-family:"HelveticaNeue",Helvetica,Arial,sans-serif;}''')运行程序代码，呈现出来的图形界面已经越来越像最终的形态的：
因为推荐模块和歌单模块中使用的都是QToolButton()部件，所以其样式也类似：
self.right_recommend_widget.setStyleSheet('''QToolButton{border:none;}QToolButton:hover{border-bottom:2pxsolid#F76677;}''')self.right_playlist_widget.setStyleSheet('''QToolButton{border:none;}QToolButton:hover{border-bottom:2pxsolid#F76677;}''')而音乐列表使用的是QPushButton()按钮部件，我们需要对其去除边框，修改字体和颜色等，所以其样式为：
self.right_newsong_widget.setStyleSheet('''QPushButton{border:none;color:gray;font-size:12px;height:40px;padding-left:5px;padding-right:10px;text-align:left;}QPushButton:hover{color:black;border:1pxsolid#F3F3F5;border-radius:10px;background:LightGray;}''')运行程序代码，现在的图形界面如下图所示：
接下来轮到播放进度条和播放控制按钮组了，我们需要将播放进度条的样色设置为浅红色，然后去除播放控制按钮的边框，所以其QSS样式为：
self.right_process_bar.setStyleSheet('''QProgressBar::chunk{background-color:#F76677;}''')self.right_playconsole_widget.setStyleSheet('''QPushButton{border:none;}''')到了这一步，运行程序代码所出现的图形界面越来越有最终界面的样子了：
接下来就是最后的美化工作了！
到了上一步，通过QSS调整的样式我们基本已经完成了，现在需要使用PyQt5中各个部件的其他内置属性来完成这个图形界面的最终美化工作。
透明的窗口背景会让图形界面有现代感和时尚感，我们来讲图形界面的窗口背景设为透明：
self.setWindowOpacity(0.9)#设置窗口透明度self.setAttribute(QtCore.Qt.WA_TranslucentBackground)#设置窗口背景透明运行程序代码，我们得到了一个观感很不一样的界面：
窗口背景设置为透明后的体验很不一样，但是那个默认的边框很不协调，那么去除丑丑的默认边框是必须要做的工作，通过窗口的setWindowFlag()属性我们可以设置窗口的状态从而把边框给隐藏了：
self.setWindowFlag(QtCore.Qt.FramelessWindowHint)#隐藏边框为了避免隐藏窗口边框后，左侧部件没有背景颜色和边框显示，我们再对左侧部件添加QSS属性：
QWidget#left_widget{background:gray;border-top:1pxsolidwhite;border-bottom:1pxsolidwhite;border-left:1pxsolidwhite;border-top-left-radius:10px;border-bottom-left-radius:10px;}运行程序代码，一个完成度99%的图形界面就出来了：
之所以说完成度99%，因为可以发现图形界面中左侧部件和右侧部件中有一条缝隙，我们通过设置布局内部件的间隙来把那条缝隙去除掉：
self.main_layout.setSpacing(0)这样出现的图形界面中就没有那条碍眼的缝隙了：
这样，我们对图形界面的美化工作就完成了。有什么问题欢迎留言讨论~