项目教程 | Pycharm+Pyqt5+Eric6实现逻辑与界面分离（实例教学）

文章目录

前言

实现步骤：实例演示

1 创建一个eric项目文件

 2. 创建窗体UI文件

3. 项目中添加文件

 4. 编译UI文件。

5. 关联信号与槽函数

        第1种方式，直接添加槽函数并与信号绑定

        第2种方式，逻辑与界面分离

总结

---

前言

首先声明，我是一妥妥的新手，非科班，完成自学。新手上路，各种踩坑。

之前因为项目需要用Qt Designer设计窗体UI文件，然后用内置的工具编译成py文件，出现UI文件修改的时候，重新编译以后每次都需要手动添加之前的代码。

网上看了很多大神的教程，学过一遍不用过一段时间又忘掉，虽然是重复造轮子，但是自己写一遍还是印象深刻。这次写这个教程算是给自己留个脚印，也可供其他新手参考。

---

实现步骤：实例演示

1. 创建一个eric项目文件

        新建一个项目文件夹，example（E:\Python Project\example）

        打开Eric6， 工具栏：project→New，出现以下窗体：项目名称命名example

                备注：这里通过Pycharm，Tool→External Tools→Eric6

             

        项目新建完成后，会在对应目录下生成如下三个文件。

         

 2. 创建窗体UI文件

        用QtDesign设计一个窗体UI文件，test.ui，存放在example目录下。

        创建一个TextBrowser和两个按钮控件，如下图：

3. 项目中添加文件

        在创建的Eric项目（项目文件example.e4p）下添加test.ui文件。工具栏：project→Add Files，选择资源文件，Source Files

        添加完成后，会在资源目录下看到test.ui文件

  

 4. 编译UI文件。

        资源文件目录下生成一个Ui_test.py文件

       

        

  用pycharm运行Ui_test.py文件，即可打开窗体。

 至此，UI窗体创建和编译已经完成。

5. 关联信号与槽函数

这里有两种实现方式：

        第1种方式，直接添加槽函数并与信号绑定

        直接在Ui_test.py文件中编写槽函数，并关联信号与槽函数。

        编写槽函数：showMsg，代码如下

def showMsg(self):
    print('您点击了按钮1.')

         关联信号与槽函数：单击按钮1，触发槽函数showMsg，代码如下

self.pushButton.clicked.connect(self.showMsg)

        

问题来了！！！ 

采用这种方法，如果需要对UI文件（test.ui）进行修改，比如添加或者删除一些控件，用Eric重新编译以后，刚刚在Ui_test.py中添加的部分代码就被覆盖掉了。此时，局限性就体现出来了。

        第2种方式，逻辑与界面分离

        生成一个新的类文件，继承Ui_test.py。

        操作方法：打开Eric6，选中test.ui文件，右键，Generate Dialog Code...，在打开的对话框中点击‘New...’，在弹出的对话框‘New Dialog Class’中可以修改新建的类名和文件名，这里默认。具体参考一下截图：

 此时，在Eric项目下生成了一个test.py文件，文件中生成了一个新类，testWin，继承了Ui_test。

 但是，test.py文件中没有入口函数，需要手动添加。用Pycharm打开test.py文件，并修改和添加代码如下：

        注意，需要对test.py中部分代码进行修改，import QApplication，from .Ui_test import Ui_testWin 修改为from Ui_test import Ui_testWin（去掉以一个‘.’）

if __name__ == "__main__":
    import sys
    app = QApplication(sys.argv)
    testWin = testWin()
    testWin.show()
    sys.exit(app.exec_())

在test.py文件中添加槽函数showMsg，并在槽函数装饰器中调用此函数：

    @pyqtSlot()
    def on_pushButton_2_clicked(self):
        """
        Slot documentation goes here.
        """
        # TODO: not implemented yet
        self.showMsg(2)

    def showMsg(self,n):
        print(f'您点击了按钮{n}。')

此时，如果再重新修改ui文件，并编译test.ui文件（compile form），编译后的结果：重置Ui_test.py文件，test.py文件不变。

划重点：上面利用Qt Designer增加了一个Radio Button控件，编译后需要对此控件进行信号与槽的绑定，直接在Eric中选中test.ui文件用Generate Dialog Code...命令，在弹出的对话框中做如下操作：

        编译后的结果：test.py文件会被更新，而不是被替换，原来手动添加的槽函数和代码都还在。

 如此，实现了界面UI文件和逻辑文件分离！！！

总结

以上介绍了利用Eric6对UI文件进行编译，实现逻辑与界面分离。简要分成以下几个步骤：

1. 利用Qt Designer设计UI窗体文件xxxx.ui；

2. 利用Eric6新建一个项目文件xxxx.e4p；

3. 在Eric工程文件中添加对应的窗体文件xxxx.ui

        3.1 编译窗体文件xxxx.ui，生成对应的Python文件Ui_xxxx.py，对应的菜单命令：Compile Form.../Compile All Forms

        3.2 生成继承类文件（默认文件名同窗体文件名，xxxx.py，可根据需要修改，比如main.py）。对应菜单命令：Generate Dialog Code...

        3.3 用重复调用3.2的命令（Generate Dialog Code...），根据需要添加槽函数装饰器，程序会自动更新xxxx.py文件。在此文件中手动写入代码不再被覆盖，比如手动添加程序入口函数。

另外，Eric还可以编译Qt Designer生成的资源文件。测试以后再上教程，这里给自己挖一个坑，后面过来填。

新手学习，如果有问题，各位看官请指正，谢谢。

---

后续来了，编译图片等资源文件。步骤如下：

1. 利用Qt Designer设计qrc资源文件，命名为resource.qrc

2. 在Eric项目工程文件中添加resource.qrc文件

3. 利用compile resource菜单命令编译生成resource_rc.py文件

4. 重新编译UI文件，系统会自动导入resource_rc.py（import resource_rc）

至此，UI界面中添加的资源都会被加载到界面，且不会影响逻辑代码。

注意：此处的资源文件已经被编译，img文件夹中的图片已经可有可无，不影响界面显示，以亲测。只是编译后的resource_rc.py文件有点大，估计是图片也被编译了。