python GUI界面设计的那些事(三)

之前写了两篇GUI的文章，今天继续填坑。

python GUI界面设计的那些事

python GUI界面设计的那些事(二)

GUI程序其实和普通程序其实就是多了一个界面，而最麻烦的就是用代码实现设计的GUI界面。

通常设计界面我们会有如下几个步骤：

1.首先会确定程序的功能。

2.然后确定使用哪些组件

3.之后手绘一个大概的界面布局。

4.完成后可以自己列一个组件清单以及属性设置。

确定好后基本上就可以去实现了，如果是用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程序有个认知，后面的就是实操部分了。​

(全文完)

长按二维码，加关注！叶子陪你玩

欢迎转载，转载请注明出处！

欢迎关注公众微信号：叶子陪你玩编程