从零开始学习的前提是对 Python 有一定的基础。(本文是 win10 的环境，另外已经安装了 Anaconda)
我们先看看如何安装吧？
pip install PyQt5 pyqt5-tools
这么简单？对的 ，你没有看错，一个命令足以。该命令会帮我们安装好 PyQt5 及其辅助工具。为了方便学习和使用，我们先研究 designer。启动 designer 是很容易的，只需要在 PowerShell 中输入：
designer
便会弹出如下界面：
制作程序 UI 界面，一般可以通过 UI 制作工具和纯代码编写两种方式来实现。在 PyQt5 中，也可以采用这两种方式。这一章主要讲解通过 Qt Designer 工具来制作 UI 界面。
Qt Designer，即 Qt 设计师，是一个强大、灵活的可视化 GUI 设计工具，可以帮助我们加快开发 PyQt5 程序的速度。Qt Designer 是专门用来制作 PyQt5 程序中UI界面的工具，它生成的 UI 界面是一个后缀为 .ui 的文件。该文件使用起来非常简单，可以通过命令将 .ui 文件转换成 .py 格式的文件，并被其他 Python 文件引用；也可以通过 CMD 进行手工转换。
Qt Designer 符合 MVC（模型—视图—控制器）设计模式，做到了可视化和业务逻辑的分离。Qt Designer具有以下优点：
- 使用简单，通过拖曳和点击就可以完成复杂的界面设计，而且还可以随时预览查看效果图。
- 转换 Python 文件方便。Qt Designer 可以将设计好的用户界面保存为
.ui文件，其实是 XML 格式的文本文件。为了在 PyQt5 中使用.ui文件，可以通过pyuic5命令将.ui文件转换为.py文件，然后将.py文件引入到自定义的 Python 代码中。
利用 VSCode 学习 PyQt5
首先，使用 vscode 创建一个工作区：GUI.code-workspace，然后打开终端，并创建 qt5 目录：
为了方便代码的管理，我们使用 git 进行管理。先设计 .gitignore 文件：
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class
# C extensions
*.so
# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST
# PyInstaller
# Usually these files are written by a python script from a template
# before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec
# Installer logs
pip-log.txt
pip-delete-this-directory.txt
# Unit test / coverage reports
htmlcov/
.tox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
.hypothesis/
.pytest_cache/
# Translations
*.mo
*.pot
# Django stuff:
*.log
local_settings.py
db.sqlite3
# Flask stuff:
instance/
.webassets-cache
# Scrapy stuff:
.scrapy
# Sphinx documentation
docs/_build/
# PyBuilder
target/
# Jupyter Notebook
.ipynb_checkpoints
# pyenv
.python-version
# celery beat schedule file
celerybeat-schedule
# SageMath parsed files
*.sage.py
# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/
# Spyder project settings
.spyderproject
.spyproject
# Rope project settings
.ropeproject
# mkdocs documentation
/site
# mypy
.mypy_cache/
# vscode & vs
.vs
.vscode
# office & pdf
*.doc
*.docx
*.pdf
# data
data/
draft/
Untitled.*
下面直接初始化仓库：
$ git init
$ git add .
$ git commit -m "start qt5 projects"
为了更好的管理，下面使用 git flow：
$ git flow init
$ git flow feature start designer
在 develop 分支下创建 feature/designer 用来管理第一个 GUI 项目。接着，我们在终端打开 designer：
在打开的 designer 界面，选择 Main Window：
下面先创建一个按钮：
- 先用鼠标拖动
1到窗口的空白位置2，接着点击3保存文件为button.ui。 - 修改按钮名称为
关闭，接着打开Edit选中编辑信号/槽：
- 使用鼠标左键拖动按钮
关闭到某一位置然后释放鼠标，弹出如下界面：
再依次选中 clicked() 、close()、OK，便得到视图如下：
- 关掉 designer 窗口，重新回到 vscode 的终端，并输入：
pyuic5 button.ui -o button.py
将 button.ui 转换为 button.py 方便后续代码的调试。启动这个 python 文件，我们需要编写 main.py：
import sys
import button
from PyQt5.QtWidgets import QApplication, QMainWindow
if __name__ == '__main__':
app = QApplication(sys.argv)
MainWindow = QMainWindow()
ui = button.Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
sys.exit(app.exec_())
然后再终端输入：
$ python main.py
便得到如下结果：
点击 关闭 则会关闭该 UI。这里还有一个问题需要注意，上图的 UI 的标题是 MainWindow，它不能很好的说明我们要表达的 UI 的含义，最好重新起一个名字。
b（￣▽￣）d 修改窗口的标题是很简单的，这里我们有 3 种方法：
- 直接在 vscode 中修改
button.py中画圈的部分，然后重新显现 UI 即可：
修改 `button.py` - 直接在 vscode 中修改
button.ui中画圈的部分，接着使用pyuic5重新生成button.py最后重新显现 UI 即可
修改 `button.ui` - 使用 designer 打开
button.ui，修改下图画圈的部分：
修改designer
直接载入 .ui 文件
也可以不用使用 pyuic5 转换 .ui 文件为 .py 文件，直接载入。下面直接编写 main.py 文件为：
import sys
from PyQt5.uic import loadUi # from PySide2.QtUiTools import QUiLoader
from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import QFile, QIODevice
if __name__ == "__main__":
app = QApplication(sys.argv)
ui_file_name = "button.ui"
ui_file = QFile(ui_file_name)
if not ui_file.open(QIODevice.ReadOnly):
print(f"Cannot open {ui_file_name}: {ui_file.errorString()}")
sys.exit(-1)
window = loadUi(ui_file)
ui_file.close()
if not window:
#print(loader.errorString())
sys.exit(-1)
window.show()
sys.exit(app.exec_())
效果和之前的使用 pyuic5 转换后的效果是一样的。
学习内容先到此结束，下次将分享更加复杂的 UI 设计以及如何打包为 .exe 文件。
