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

àì夳堔傛蜴生んèń 2024-03-17 09:10 11阅读 0赞

**目录**

第一步：可视化界面设计

一、可视化界面初始化。

二、控件属性的修改编辑

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

第二步 ui 文件转 py 文件

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

一、实现项目框架的引用

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

结束语

欢迎 关注、点赞、收藏。

--------------------

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

## **第一步：可视化界面设计** ##

### 一、可视化界面初始化。 ###

首先，打开QT Designer 。基于Pycharm中打开方式，具体步骤如下：【工具】--【External Tools】-【PyQtDesigner】。

请注意，如果没有这个【external Tools】选项，请根据本系列中的（1）节环境搭建，去配置相关路径。

![924448f15786400bae8e914560b610b6.png][]

在打开的界面中，在显示窗口中选择【Widget】-【创建】后，生成要新建的窗体编辑界面。![2b36e0db5a974141b7858a3dd6f45dc5.png][]

然后，根据自己的UI界面设计，选择合适的控件，按住左键拖动到新建窗体中，并排好位置。下图是简单的控件拖动摆放位置。

![ee0fe81556424bd4826df54922b78ee9.png][]

### 二、控件属性的修改编辑 ###

接着，针对每个控件做两件事情：

1、设置控件上面的显示内容：方式一：双击控件，会进入控件的编辑状态，可以直接对控件的内容进行编辑；方式二：选中要编辑的控件，然后在右下角的【属性编辑器】中，找到【text】属性，进行更改。如图：

![725610e6fd9b41c2bb31d67101572eb9.png][]

对整改界面控件内容的编辑，完成结果（按ctrl+R 显示）如图所示：

![d743c2e33df841ca8156ec7252977c8a.png][]

2、更改控件的名称，此处更改后的控件名称，是在后续代码中进行调用需要的，一般要求在命名时需要根据功能来命名，比如，跳转按钮，可以命名为gotoBtn等。能够看其名，知其意。具体更改方式为：选中要更改的控件，然后在【属性编辑器】中，找到【objectName】属性，进行更改。（其他控件更改，请参照本步骤。）

![872411484f0549f4b23cccb98fea6fbd.png][]

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

完成上述步骤后，我们给【显示输入内容】按钮，绑定事件响应。具体操作为：选中菜单栏中的【信号/槽】图标（如图），然后，点击【显示】按钮，按住后，进行拖动。在出现红线后，把鼠标移动到窗体外，此时会弹出【配置连接】对话框。

![54b8819edaca469a8f773794bc3637a1.png][]

在【配置连接】对话框中，左侧边栏对应的是（showBtn）对应的事件，选中clicked事件，然后，右侧边栏会变成可编辑状态，点击下面的【编辑】按钮，会出现【信号/槽】对话框。在该对话框中，点击“加号”，并命名一个槽函数，比如showContnt()。完成后，点击【ok】按钮。返回【配置连接】对话框，右侧边栏会出现你命名的那个槽函数。选中它，让其跟按钮的clicked事件绑定。这样，在程序中，你点击按钮后，程序就会去执行你定义的这个showContnt（）函数中的逻辑。

![c5a2aeed70d84aeca97ab3d68e15608c.png][]

至此，可视化界面的设计，就已经完成了。点击【文件】-【保存】，会让你保存为\*.ui类型的文件。命名first.ui后，选择合适位置，保存即可。![0adc3bf8c8b74a9094cf550cbef2bbea.png][]

## **第二步 ui 文件转 py 文件**  ##

在PyCharm开发环境中，选择【项目】，选中刚保存的（first.ui文件）点击右键，选择【external tools】-【PyUIC】，会生成first.py文件。

![c7630866000c444088f37922d8a61ccf.png][]

打开first.ui文件，可以查看到文件的内容。如图。![c91d54c98c424541aba00aa5a5458271.png][]

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

在项目中，新建一个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())

![edab3d52950c475687ab360f13a8b2dc.png][]

点击运行按钮后，会出现界面窗口，如图

![730c8c3304354efaa0e80124935f3f8c.png][]

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

在槽函数中，实现对事件的响应。具体代码如下：

# 实现定义的槽函数逻辑
        def showContnt(self):
            str = self.inputEdit.text()
            self.showLbl.setText(str)

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

![9d8d82b3a9e14375822edd4fda094a81.png][]

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

## **结束语** ##

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

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

[924448f15786400bae8e914560b610b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b53895201c4e4c06a96e2a40e270882f.png
[2b36e0db5a974141b7858a3dd6f45dc5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/5d1ae73f69094ec98fa288a40d62b5b5.png
[ee0fe81556424bd4826df54922b78ee9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f33da2ccaba748059d8e5b40d2810e5d.png
[725610e6fd9b41c2bb31d67101572eb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/d7cd2a2b9364471491eb896ac786c436.png
[d743c2e33df841ca8156ec7252977c8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b2dea9602dc44832a05d88c11da1d23e.png
[872411484f0549f4b23cccb98fea6fbd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/8dec5ac92f17441b832365b94752d250.png
[54b8819edaca469a8f773794bc3637a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/1d84f37ff2b3484982fcee20164b13ae.png
[c5a2aeed70d84aeca97ab3d68e15608c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/c8b277c720ff4ae6b2484a38f13b7efa.png
[0adc3bf8c8b74a9094cf550cbef2bbea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/de81cd6ef69c481daf1cdaf0094b999a.png
[c7630866000c444088f37922d8a61ccf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f4d492c1447a47339a34e69c433d2c2a.png
[c91d54c98c424541aba00aa5a5458271.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/7df90ff8790748f9ad34a073090f0098.png
[edab3d52950c475687ab360f13a8b2dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/40b939f0863c49f3a7338040f54f30b3.png
[730c8c3304354efaa0e80124935f3f8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/9569efc1836144feaf8f4b0b30a9c39f.png
[9d8d82b3a9e14375822edd4fda094a81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/7b64d109df874c0797af67629e92cc00.png