【PyQt5桌面应用开发】2.可视化界面编程步骤（超级详细）_pycharm可视化界面编程

目录

第一步：可视化界面设计

       一、可视化界面初始化。

         二、控件属性的修改编辑

         三、事件响应：信号和槽函数（知识点后续会讲，此处先会用）

第二步  ui 文件转 py 文件 

第三步  编写代码，实现具体的逻辑

        一、实现项目框架的引用

         二、完成槽函数的实现逻辑

结束语

        欢迎 关注、点赞、收藏。

---

鉴于本学期在学校开设的可视化界面编程，为方便同学查询和学习。特记录于此。

 

第一步：可视化界面设计

       一、可视化界面初始化。

        首先，打开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)

        完成后，点击运行，即可实现【按钮】事件响应。如图

 

        至此，一个完整的可视化程序开发就实现了。

        

结束语

        各位看官，如果你觉得本文不错的话，欢迎收藏和关注。方便以后系列文章更新后，您能第一时间收到通知。

        码文不易，欢迎 关注、点赞、收藏。