PyQt5中 Qt Designer工具的使用

末蓝、 2022-08-30 11:12 276阅读 0赞

##### Qt Designer是PyQt5程序UI界面的实现工具，使用Qt Designer可以拖拽、点击完成GUI界面设计，并且设计完成的.ui程序可以转换成.py文件供python程序调用。本文主要通过用户登录需求描述Qt Designer工具开发界面的使用方法。 #####

### 本文主要内容 ###

1、Qt Designer程序主界面窗口介绍。

2、Qt Designer程序实现界面开发的案例。包括使用Qt Designer实现程序Gui开发、使用pyuic5将.ui转换.py程序、信号与槽的配置以及实现、使用pyinstaller转换成可执行程序的完成过程。

### 环境&工具版本 ###

Win10+pyhton3.7.4 + PyQt 5.11.2

### Qt Designer工具主界面 ###

打开路径：$\{python安装目录\}/Lib/site-packages/pyqt5\_tools/designer.exe。主界面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU1Mjkz_size_16_color_FFFFFF_t_70]  
主界面不同区域介绍：  
**工具箱 区域**：提供GUI界面开发使用的各种基本控件，如单选框、文本框等。可以拖动到新创建的主程序界面。  
**主界面区域**：用户放置各种从工具箱拖过来的各种控件。模板选项中最常用的就是Widget（通用窗口）和MainWindow（主窗口）。二者区别主要是Widget窗口不包含菜单栏、工具栏等。可以分别创建对比看看。  
**对象查看器 区域**：查看主窗口放置的对象列表。  
**属性编辑器 区域**： 提供对窗口、控件、布局的属性编辑功能。比如修改控件的显示文本、对象名、大小等。  
**信号/槽编辑器 区域**：编辑控件的信号和槽函数，也可以添加自定义的信号和槽函数。

## Qt Designer基本控件介绍 ##

Widget Box控件工具箱是按照控件作用类别进行划分的。这里作为实现入门级界面实现，主要介绍最常使用的控件及控件对象相关函数。函数方法知道怎么获取控件输入内容以及如何将后台操作结果输出到界面控件显示的主要函数就可以了。  
![在这里插入图片描述][20210719175128450.png]  
![在这里插入图片描述][20210719175104342.png]![在这里插入图片描述][20210719175055992.png]

1.  显示控件
    
    **Lable**：文本标签，显示文本，可以用来标记控件。  
    **Text Browser**：显示文本控件。用于后台命令执行结果显示
2.  输入控件，提供与用户输入交互
    
    **Line Edit**：单行文本框，输入单行字符串。控件对象常用函数为Text() 返回文本框内容，用于获取输入。setText() 用于设置文本框显示。  
    **Text Edit**：多行文本框，输入多行字符串。控件 对象常用函数同Line Edit控件。  
    **Combo Box**：下拉框列表。用于输入指定枚举值。
3.  控件按钮，供用户选择与执行
    
    **Push Button**：命令按钮。常见的确认、取消、关闭等按钮就是这个控件。clicked信号一定要记住。clicked信号就是指鼠标左键按下然后释放时会发送信号，从而触发相应操作。  
    **Radio Button**：单选框按钮。  
    **Check Box**：多选框按钮。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU1Mjkz_size_16_color_FFFFFF_t_70 1]

## Qt Designer工具实现 ##

了解基本控件及作用和获取输入/显示方法后，就可以开始动手实现小需求了。。比如登录界面。获取用户名和密码并显示。。  
打开Qt Designer，开始拖拽控件实现吧。。  
**Step1**：打开主界面，选择Widget模板  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU1Mjkz_size_16_color_FFFFFF_t_70 2]  
**Step2**：从Widget Box工具箱中拖拽2个label、2个line Edit、2个Push Button以及1个Text Browser。拖完后如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU1Mjkz_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU1Mjkz_size_16_color_FFFFFF_t_70]: /images/20220829/e1ce2305db034d62bf756b0d33824704.png
[20210719175128450.png]: /images/20220829/107426f45b434909b5285e3fd7ca341d.png
[20210719175104342.png]: https://img-blog.csdnimg.cn/20210719175104342.png
[20210719175055992.png]: /images/20220829/c20bc61e32524d148055547b50eb6e1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU1Mjkz_size_16_color_FFFFFF_t_70 1]: /images/20220829/10fa4b0da9e44191a9c6205b6ae1d998.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU1Mjkz_size_16_color_FFFFFF_t_70 2]: /images/20220829/02e46a920966495c83d4629b7024b416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU1Mjkz_size_16_color_FFFFFF_t_70 3]: /images/20220829/65379f7ddc644a96b504614cace4cf2b.png