目录

第一步:可视化界面设计

       一、可视化界面初始化。

         二、控件属性的修改编辑

         三、事件响应:信号和槽函数(知识点后续会讲,此处先会用)

第二步  ui 文件转 py 文件 

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

        一、实现项目框架的引用

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

结束语

        欢迎 关注、点赞、收藏。


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

 

第一步:可视化界面设计

       一、可视化界面初始化。

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

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

python pyqt创建主界面 pyqt5怎么做界面_python

         在打开的界面中,在显示窗口中选择【Widget】-【创建】后,生成要新建的窗体编辑界面。

python pyqt创建主界面 pyqt5怎么做界面_pycharm_02

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

python pyqt创建主界面 pyqt5怎么做界面_pycharm_03

         二、控件属性的修改编辑

        接着,针对每个控件做两件事情:

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

python pyqt创建主界面 pyqt5怎么做界面_qt5_04

         对整改界面控件内容的编辑,完成结果(按ctrl+R 显示)如图所示:

python pyqt创建主界面 pyqt5怎么做界面_python pyqt创建主界面_05

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

python pyqt创建主界面 pyqt5怎么做界面_pycharm_06

         三、事件响应:信号和槽函数(知识点后续会讲,此处先会用)

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

python pyqt创建主界面 pyqt5怎么做界面_控件_07

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

python pyqt创建主界面 pyqt5怎么做界面_qt5_08

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

python pyqt创建主界面 pyqt5怎么做界面_pycharm_09

第二步  ui 文件转 py 文件 

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

python pyqt创建主界面 pyqt5怎么做界面_python pyqt创建主界面_10

         打开first.ui文件,可以查看到文件的内容。如图。

python pyqt创建主界面 pyqt5怎么做界面_控件_11

 

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

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

python pyqt创建主界面 pyqt5怎么做界面_pycharm_12

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

python pyqt创建主界面 pyqt5怎么做界面_python_13

 

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

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

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

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

python pyqt创建主界面 pyqt5怎么做界面_控件_14

 

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

        

结束语

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

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