python GUI界面设计的那些事(三)
之前写了两篇GUI的文章，今天继续填坑。
python GUI界面设计的那些事(二)
GUI程序其实和普通程序其实就是多了一个界面，而最麻烦的就是用代码实现设计的GUI界面。
通常设计界面我们会有如下几个步骤：
1.首先会确定程序的功能。
2.然后确定使用哪些组件
3.之后手绘一个大概的界面布局。
4.完成后可以自己列一个组件清单以及属性设置。
组件类型 | 组件命名 | 属性 | 属性值 |
|---|---|---|---|
屏幕 | window | 标题 | 音乐播放器 |
宽高 | 640*480 | ||
背景 | gray | ||
按钮 | button_1 | 文本内容 | 播放 |
滑块 | slider | 最小值 | 0 |
最大值 | 100 |
确定好后基本上就可以去实现了，如果是用tkinter 的话，那么就只能通过代码慢慢写了。
这里我们就不用tkinter了，使用我们的QtCreator 界面设计工具，直接拖拽完成。
预览效果：
设计界面的过程，和程序没有任何关系，完全是按照我们的图纸（界面布局以及组件清单属性）拖拽实现的。
问题来了，这个界面要怎么用呢，怎样和我们的代码结合到一起呢？
这就得介绍上次说的的Qt,PyQt5或者PySide2。
Qt 是由Qt Company开发的跨平台C++图形用户界面应用程序开发框架，实现了一套代码可以在所有操作系统、平台和屏幕类型上部署，从台式机、嵌入式系统到可穿戴设备、移动设备。
比如奔驰的车载信息娱乐系统
LG的WebOS
更多可以看官网介绍：https://www.qt.io/zh-cn/
不过Qt 使用的是C++语言，为了能够让 python 使用上Qt 的强大功能，出现了PyQt5 和 PySide2 ,通过这两个库就能够使用python 调用Qt 的功能了。
因此在python中，它的名字不叫Qt，而是叫做PySide2，但是功能是一样的，当然还有其它公司开发的PyQt5，功能也是一样的。至于为什么会有这么多不同名字和版本，感兴趣的可以自己去了解，我们这里要使用的是PySide2，它是Qt5在python中的版本。
而刚才设计界面的QtCreator 工具其实Qt网站上的一个软件，用来帮助我们可视化的设计界面，省去了手动编写代码实现界面的过程。
在使用前，我们需要先安装pyside2模块，这里有两种方法，直接使用pip install PySide2安装，第二种使用国内的镜像安装，速度会比较快。
首先，我们使用pyside2官方网站上的一个案例程序，看看一个最基本的GUI程序是怎样，这里自己编写的时候一定要注意字母大小写的一个问题。
效果
可以看到，PySide2 和 tkinter 类似，也可以通过代码来实现界面设计，不过那样太麻烦了。
在PySide2中，有一个转换工具，可以将设计好的界面，直接转换成布局的python 代码.
可以在我们安装python环境的地方，看到一个Scripts文件夹，里面有一个pyside2-uic.exe的程序。
接着启动终端，通过调用pyside2-uic 生成我们的一个py文件，具体使用如下，-o 后面接的是我们要生成的文件名字。
运行后，桌面上会有一个py结尾的文件。
打开后确实是python代码
完整代码
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'music_player.ui',
# licensing of 'music_player.ui' applies.
#
# Created: Tue Apr 6 22:43:12 2021
# by: pyside2-uic running on PySide2 5.13.0
#
# WARNING! All changes made in this file will be lost!
from PySide2 import QtCore, QtGui, QtWidgets
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(380, 220)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.listView = QtWidgets.QListView(self.centralwidget)
self.listView.setGeometry(QtCore.QRect(10, 10, 250, 150))
self.listView.setObjectName("listView")
self.label = QtWidgets.QLabel(self.centralwidget)
self.label.setGeometry(QtCore.QRect(10, 170, 60, 25))
font = QtGui.QFont()
font.setPointSize(16)
self.label.setFont(font)
self.label.setAlignment(QtCore.Qt.AlignCenter)
self.label.setObjectName("label")
self.label_2 = QtWidgets.QLabel(self.centralwidget)
self.label_2.setGeometry(QtCore.QRect(180, 170, 60, 25))
font = QtGui.QFont()
font.setPointSize(16)
self.label_2.setFont(font)
self.label_2.setAlignment(QtCore.Qt.AlignCenter)
self.label_2.setObjectName("label_2")
self.horizontalSlider = QtWidgets.QSlider(self.centralwidget)
self.horizontalSlider.setGeometry(QtCore.QRect(75, 170, 100, 25))
font = QtGui.QFont()
font.setPointSize(14)
self.horizontalSlider.setFont(font)
self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
self.horizontalSlider.setObjectName("horizontalSlider")
self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setGeometry(QtCore.QRect(270, 50, 100, 25))
font = QtGui.QFont()
font.setPointSize(12)
self.pushButton.setFont(font)
self.pushButton.setObjectName("pushButton")
self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_2.setGeometry(QtCore.QRect(270, 90, 100, 25))
font = QtGui.QFont()
font.setPointSize(12)
self.pushButton_2.setFont(font)
self.pushButton_2.setObjectName("pushButton_2")
self.pushButton_3 = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_3.setGeometry(QtCore.QRect(270, 10, 100, 25))
font = QtGui.QFont()
font.setPointSize(12)
self.pushButton_3.setFont(font)
self.pushButton_3.setObjectName("pushButton_3")
self.comboBox = QtWidgets.QComboBox(self.centralwidget)
self.comboBox.setGeometry(QtCore.QRect(270, 130, 100, 25))
font = QtGui.QFont()
font.setPointSize(12)
self.comboBox.setFont(font)
self.comboBox.setObjectName("comboBox")
self.comboBox.addItem("")
self.comboBox.addItem("")
self.comboBox.addItem("")
self.pushButton_4 = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_4.setGeometry(QtCore.QRect(270, 170, 100, 25))
font = QtGui.QFont()
font.setPointSize(12)
self.pushButton_4.setFont(font)
self.pushButton_4.setObjectName("pushButton_4")
MainWindow.setCentralWidget(self.centralwidget)
self.statusbar = QtWidgets.QStatusBar(MainWindow)
self.statusbar.setObjectName("statusbar")
MainWindow.setStatusBar(self.statusbar)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
MainWindow.setWindowTitle(QtWidgets.QApplication.translate("MainWindow", "音乐播放器", None, -1))
self.label.setText(QtWidgets.QApplication.translate("MainWindow", "00:00", None, -1))
self.label_2.setText(QtWidgets.QApplication.translate("MainWindow", "00:00", None, -1))
self.pushButton.setText(QtWidgets.QApplication.translate("MainWindow", "上一首", None, -1))
self.pushButton_2.setText(QtWidgets.QApplication.translate("MainWindow", "下一首", None, -1))
self.pushButton_3.setText(QtWidgets.QApplication.translate("MainWindow", "打开文件夹", None, -1))
self.comboBox.setItemText(0, QtWidgets.QApplication.translate("MainWindow", "顺序播放", None, -1))
self.comboBox.setItemText(1, QtWidgets.QApplication.translate("MainWindow", "单曲循环", None, -1))
self.comboBox.setItemText(2, QtWidgets.QApplication.translate("MainWindow", "随机播放", None, -1))
self.pushButton_4.setText(QtWidgets.QApplication.translate("MainWindow", "播放", None, -1))总结：
通过使用QtCreator界面设计工具可以非常高效的帮助我们设计UI界面，通过转换工具，可以将界面ui文件变成一个py文件，这个文件可以作为一个模块文件导入，从而实现了界面代码和功能代码的分离。
好了，填坑到此结束了，之后具体的PySide2 界面设计以及具体的实践案例将会通过视频的方式发布，这三篇只是让大家对GUI程序有个认知，后面的就是实操部分了。
(全文完)
欢迎转载，转载请注明出处！ 欢迎关注公众微信号：叶子陪你玩编程