鉴于本学期在学校开设的可视化界面编程，为方便同学查询和学习。特记录于此。
第一步：可视化界面设计
一、可视化界面初始化。
首先，打开QT Designer 。基于Pycharm中打开方式，具体步骤如下：【工具】--【External Tools】-【PyQtDesigner】。
请注意，如果没有这个【external Tools】选项，请根据本系列中的（1）节环境搭建，去配置相关路径。
在打开的界面中，在显示窗口中选择【Widget】-【创建】后，生成要新建的窗体编辑界面。 
然后，根据自己的UI界面设计，选择合适的控件，按住左键拖动到新建窗体中，并排好位置。下图是简单的控件拖动摆放位置。
二、控件属性的修改编辑
接着，针对每个控件做两件事情：
1、设置控件上面的显示内容：方式一：双击控件，会进入控件的编辑状态，可以直接对控件的内容进行编辑；方式二：选中要编辑的控件，然后在右下角的【属性编辑器】中，找到【text】属性，进行更改。如图：
对整改界面控件内容的编辑，完成结果（按ctrl+R 显示）如图所示：
2、更改控件的名称，此处更改后的控件名称，是在后续代码中进行调用需要的，一般要求在命名时需要根据功能来命名，比如，跳转按钮，可以命名为gotoBtn等。能够看其名，知其意。具体更改方式为：选中要更改的控件，然后在【属性编辑器】中，找到【objectName】属性，进行更改。（其他控件更改，请参照本步骤。）
三、事件响应：信号和槽函数（知识点后续会讲，此处先会用）
完成上述步骤后，我们给【显示输入内容】按钮，绑定事件响应。具体操作为：选中菜单栏中的【信号/槽】图标（如图），然后，点击【显示】按钮，按住后，进行拖动。在出现红线后，把鼠标移动到窗体外，此时会弹出【配置连接】对话框。
在【配置连接】对话框中，左侧边栏对应的是（showBtn）对应的事件，选中clicked事件，然后，右侧边栏会变成可编辑状态，点击下面的【编辑】按钮，会出现【信号/槽】对话框。在该对话框中，点击“加号”，并命名一个槽函数，比如showContnt()。完成后，点击【ok】按钮。返回【配置连接】对话框，右侧边栏会出现你命名的那个槽函数。选中它，让其跟按钮的clicked事件绑定。这样，在程序中，你点击按钮后，程序就会去执行你定义的这个showContnt（）函数中的逻辑。
至此，可视化界面的设计，就已经完成了。点击【文件】-【保存】，会让你保存为*.ui类型的文件。命名first.ui后，选择合适位置，保存即可。 
第二步 ui 文件转 py 文件
在PyCharm开发环境中，选择【项目】，选中刚保存的（first.ui文件）点击右键，选择【external tools】-【PyUIC】，会生成first.py文件。
打开first.ui文件，可以查看到文件的内容。如图。 
第三步 编写代码，实现具体的逻辑
在项目中，新建一个py文件，命名为demo。然后，打开该文件进行代码编写。
一、实现项目框架的引用
在demo文件中，写入如下代码：
import sys from PyQt5.QtWidgets import * # 此处引入的是我们设计的界面的类，在first.py文件中 from first import Ui_Form # 新建类来继承UiForm，这样我们再更改界面后，不用再去修改我们写的逻辑 class DemoUi(QWidget,Ui_Form): # 类的初始化 def __init__(self): super(DemoUi,self).__init__() self.setupUi(self) # 实现定义的槽函数逻辑 def showContnt(self): pass #此处是测试代码 if __name__=="__main__": app=QApplication(sys.argv) dm=DemoUi() dm.show() sys.exit(app.exec())
点击运行按钮后，会出现界面窗口，如图
二、完成槽函数的实现逻辑
在槽函数中，实现对事件的响应。具体代码如下：
# 实现定义的槽函数逻辑 def showContnt(self): str = self.inputEdit.text() self.showLbl.setText(str)
完成后，点击运行，即可实现【按钮】事件响应。如图
至此，一个完整的可视化程序开发就实现了。
结束语
各位看官，如果你觉得本文不错的话，欢迎收藏和关注。方便以后系列文章更新后，您能第一时间收到通知。
码文不易，欢迎 关注、点赞、收藏。
