Python 可视化界面互动设计-GUI开发（从零开始）

Qt Designe 安装并加载

Qt Designer 解释

Qt Designer是PyQt5 程序UI界面的实现工具，使用 Qt Designer 可以拖拽、点击完成GUI界面设计，并且设计完成的 .ui 程序可以转换成 .py 文件供 python 程序调用

环境准备

使用pip安装

pip install pyqt5-tools

安装完成后的结果如图所示

找到 Qt Designer 安装路径

我的路径如下：

C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python39_64\Lib\site-packages\qt5_applications\Qt\bin

在 pycharm 加载配置 Qt Designer 功能

在设置中点击外部工具，点击加号，自定义名称，输入程序文件位置，点击确认

开启 Qt Designer 功能成功进入 Qt Designer 界面

PyUIC编译.UI成.py文件

在 pycharm 加载配置 PyUIC 功能

注意事项：

4.程序为Python.exe文件路径

5.实参中填入 -m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py 这段代码可以让你自动将你的.ui文件转换为.py文件（不用手动设置.py的文件名）

• -m: 这个选项告诉 Python 解释器从指定的模块运行脚本，而不是从文件系统中的脚本文件。
• PyQt5.uic.pyuic: 这是指定的模块名称，它是 PyQt5 用户界面编译器的 Python 模块版本。通过 -m 选项调用这个模块，可以直接运行它，而不需要找到 pyuic5.exe 的可执行文件。
• $FileName$: 这是一个占位符，代表要编译的 .ui 文件的完整路径和文件名。例如，如果文件名为 mainwindow.ui，那么 $FileName$ 就会被替换为 path/to/mainwindow.ui。
• -o: 这个选项告诉编译器将输出写入指定的文件。
• $FileNameWithoutExtension$.py: 这个占位符代表输出的 Python 文件的路径和文件名。其中 $FileNameWithoutExtension$ 表示去掉 .ui 扩展名后的文件名。例如，如果 $FileName$ 是 mainwindow.ui，那么 $FileNameWithoutExtension$ 就是 mainwindow，最终的输出文件将是 path/to/mainwindow.py。
• 整个命令的意思是：使用 Python 解释器运行 PyQt5.uic.pyuic 模块，将 $FileName$ 指定的 .ui 文件编译成 Python 代码，并将结果保存到 $FileNameWithoutExtension$.py 文件中

6.工作目录中填入 $FileDir$ 在 PyCharm 中，$FileDir$ 是一个特殊的变量，它代表了当前打开或编辑的文件所在的目录。当你在 PyCharm 的各种配置选项中使用这个变量时，它会被替换为实际的文件路径。

使用PyUIC进行转译

1. 把.ui文件剪切到你的程序源文件夹中
2. 右键点击.ui文件选择PyUIC工具
3. 在程序文件夹中就会生成一个同名.py文件

附加注意事项

安装 PyQt5 和 qt designer 后，导入 PyQt5：报错 ModuleNotFoundError: No module named 'PyQt5'

解决办法：
项目下的venv目录下，把pyvenv.cfg文件中的如下参数改成true

include-system-site-packages = true

内容解释

使用 pyuic5 工具将 .ui 文件转换成 Python 代码，这个转换过程会自动生成两个类，其中包含一个 setupUi 函数，用于设置界面、传递信号。另一个是 etranslateUi 函数通目的是设置界面上所有控件的文本

def setupUi(self, MainWindow):
def retranslateUi(self, MainWindow):

交互界面制作

界面组件设计

Qt Designer 制作操作界面（此部分内容比较简单和VB一样）

窗口一：

这个操作界面使用了以下模块

下拉框	comboBox	短文本输入框	lineEdit
长文本输入框	textEdit	按钮	pushButton
滚动区域	scrollArea

备注：第一次使用 scrollArea 时会发现不自动显示滚动条，这时需要我们先设置好需要的页面大小，之后关闭widget Resizable，让后再缩小 scrollArea 窗口，此时滚动条就出现了。同时可在 QAbstractScrollArea 中选择关闭横向滚动条。

窗口二：

组件通信绑定

以第二个窗口为例，我们建立了两个信号槽，分别实现的功能是：

1.点击确认，下拉框中选定的省市会合并成一条文本内容输出。

2.更新第一个下拉框中内容时，第二个下拉框会同步更新。

更新中……