python漂亮gui界⾯模板下载_PythonGUI教程（⼗六）：在
PyQt5中美化和装。。。
在默认情况下，我们使⽤PyQt5创建出来的窗⼝和部件都是默认的样式，虽然谈不上很丑，但是也毫⽆美感可⾔。其实，在PyQt5中，我们可以有较⾼的⾃由度来⾃定义窗⼝和各种⼩部件的样式，通过⾃定义这些样式，以达到美化图形界⾯的⽬的。
本篇⽂章中，我们就通过⼀个实际的例⼦，使⽤QSS和PyQt5的配置属性，实现图形⽤户界⾯的美化⼯作。
react 按钮样式⾸先上效果图：
使⽤到的图⽚素材有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):frameset标签的属性
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()
<_())
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('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字体图标的显⽰。然后将创建的按钮添加到左侧部件的⽹格布局层中：
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)
python入门教程appself.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')iphone socks5全局代理
self.right_recommend_widget = QtWidgets.QWidget() # 推荐封⾯部件django视频上传与播放
self.right_recommend_layout = QtWidgets.QGridLayout() # 推荐封⾯⽹格布局
self.right_recommend_widget.setLayout(self.right_recommend_layout)
self.right_recommend_layout.end_button_1,0,0)
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()⼯具按钮部件来实现。
⾳乐列表的具体代码如下所⽰：
self.right_newsong_lable = QtWidgets.QLabel("最新歌曲")
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论