Python写视图界面--pyqt的使用

ゝ一世哀愁。 2022-12-24 15:51 214阅读 0赞

**前言**

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

**开发工具版本**

pyhton3.7.4 + PyQt 5.11.2

**Qt Designer工具主界面**

打开路径：$\{python安装目录\}/Lib/site-packages/pyqt5\_tools/designer.exe。主界面如下：

![976d4f3b5aab9d61f0a211191a4b8b08.png][]

主界面不同区域介绍：

**工具箱 区域**：提供Gui界面开发各种基本控件，如单选框、文本框等。可以拖动到新创建的主程序界面。

**主界面区域**：用户放置各种从工具箱拖过来的各种控件。模板选项中最常用的就是Widget（通用窗口）和MainWindow（主窗口）。二者区别主要是Widget窗口不包含菜单栏、工具栏等。可以分别创建对比看看。

**对象查看器 区域**：查看主窗口放置的对象列表。

**属性编辑器 区域**： 提供对窗口、控件、布局的属性编辑功能。比如修改控件的显示文本、对象名、大小等。

**信号/槽编辑器 区域**：编辑控件的信号和槽函数，也可以添加自定义的信号和槽函数。

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

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

![ec84b73e869605e2b6e50d86940ac3c0.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**：多选框按钮。

![e51f3bc550c47475c2ed9f755726d0b6.png][]

**Qt Designer工具实现**

了解基本控件及作用和获取输入/显示方法后，就可以开始动手实现小需求了。。比如登录界面。获取用户名和密码并显示。。

打开Qt Designer，开始拖拽控件实现吧。。

**Step1**：打开主界面，选择Widget模板

![68e53509d2c0e4c0dce2697a179e96ee.png][]

**Step2**：从Widget Box工具箱中拖拽2个label、2个line Edit、2个Push Button以及1个Text Browser。拖完后如下：

![18866b9b895b5771fc23ee076074b16b.png][]

**Step3**：双击各个控件，修改控件名称（对应属性编辑区中的text，可直接双击控件修改）以及对象名称（对应属性编辑区中的objectName）。对象名称一定记得修改。默认生成的label\_1、label\_2这种名称无法直接判断到底是对应哪个控件。。

![9d00ea6c143d84d6902168ec4a300c9a.png][]

点击菜单栏Form - Prview。预览界面实现效果

![dbe354ec5e4286ee97ac0eee63467448.png][]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 </td> 
 <td> <code>&lt;?</code><code>xml</code> <code>version</code><code>=</code><code>"1.0"</code> <code>encoding</code><code>=</code><code>"UTF-8"</code><code>?&gt;</code> <code>&lt;</code><code>ui</code> <code>version</code><code>=</code><code>"4.0"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>class</code><code>&gt;Form&lt;/</code><code>class</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>widget</code> <code>class</code><code>=</code><code>"QWidget"</code> <code>name</code><code>=</code><code>"Form"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"geometry"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>x</code><code>&gt;0&lt;/</code><code>x</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>y</code><code>&gt;0&lt;/</code><code>y</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>width</code><code>&gt;549&lt;/</code><code>width</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>height</code><code>&gt;199&lt;/</code><code>height</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"windowTitle"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>string</code><code>&gt;用户登录&lt;/</code><code>string</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>widget</code> <code>class</code><code>=</code><code>"QLabel"</code> <code>name</code><code>=</code><code>"user_label"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"geometry"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>x</code><code>&gt;50&lt;/</code><code>x</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>y</code><code>&gt;40&lt;/</code><code>y</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>width</code><code>&gt;61&lt;/</code><code>width</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>height</code><code>&gt;21&lt;/</code><code>height</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"text"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>string</code><code>&gt;用户名&lt;/</code><code>string</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>widget</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>widget</code> <code>class</code><code>=</code><code>"QLineEdit"</code> <code>name</code><code>=</code><code>"user_lineEdit"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"geometry"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>x</code><code>&gt;130&lt;/</code><code>x</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>y</code><code>&gt;40&lt;/</code><code>y</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>width</code><code>&gt;113&lt;/</code><code>width</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>height</code><code>&gt;20&lt;/</code><code>height</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>widget</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>widget</code> <code>class</code><code>=</code><code>"QLabel"</code> <code>name</code><code>=</code><code>"pwd_label"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"geometry"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>x</code><code>&gt;50&lt;/</code><code>x</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>y</code><code>&gt;80&lt;/</code><code>y</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>width</code><code>&gt;54&lt;/</code><code>width</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>height</code><code>&gt;12&lt;/</code><code>height</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"text"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>string</code><code>&gt;密码&lt;/</code><code>string</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>widget</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>widget</code> <code>class</code><code>=</code><code>"QLineEdit"</code> <code>name</code><code>=</code><code>"pwd_lineEdit"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"geometry"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>x</code><code>&gt;130&lt;/</code><code>x</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>y</code><code>&gt;70&lt;/</code><code>y</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>width</code><code>&gt;113&lt;/</code><code>width</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>height</code><code>&gt;20&lt;/</code><code>height</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>widget</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>widget</code> <code>class</code><code>=</code><code>"QPushButton"</code> <code>name</code><code>=</code><code>"login_Button"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"geometry"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>x</code><code>&gt;50&lt;/</code><code>x</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>y</code><code>&gt;110&lt;/</code><code>y</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>width</code><code>&gt;75&lt;/</code><code>width</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>height</code><code>&gt;23&lt;/</code><code>height</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"text"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>string</code><code>&gt;登录&lt;/</code><code>string</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>widget</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>widget</code> <code>class</code><code>=</code><code>"QPushButton"</code> <code>name</code><code>=</code><code>"cancel_Button"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"geometry"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>x</code><code>&gt;160&lt;/</code><code>x</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>y</code><code>&gt;110&lt;/</code><code>y</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>width</code><code>&gt;75&lt;/</code><code>width</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>height</code><code>&gt;23&lt;/</code><code>height</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"text"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>string</code><code>&gt;退出&lt;/</code><code>string</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>widget</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>widget</code> <code>class</code><code>=</code><code>"QTextBrowser"</code> <code>name</code><code>=</code><code>"user_textBrowser"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>property</code> <code>name</code><code>=</code><code>"geometry"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>x</code><code>&gt;270&lt;/</code><code>x</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>y</code><code>&gt;30&lt;/</code><code>y</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>width</code><code>&gt;221&lt;/</code><code>width</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>height</code><code>&gt;101&lt;/</code><code>height</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>rect</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>property</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>widget</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>widget</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>resources</code><code>/&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>connections</code><code>/&gt;</code> <code>&lt;/</code><code>ui</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**Step4**：点击File -Save保存实现结果。保存文件名为login.ui。

![dbae94a7ab0b5ef042a3cd77ee8b94d5.png][]

**Step5**：界面开发完成。

**将.ui文件转换为.py文件**

使用命令行pyuic5 -o login.py login.ui转换成.py文件。调用格式为pyuic5 -o \{输出文件名\} \{输入designer设计好的.ui后缀界面文件\}。执行结果如下

![81f5cb0d20712d17d94e9ce54759b079.png][]

转换后的.py文件内容如下：

**界面与业务逻辑分离实现**

这一步主要实现业务逻辑，也就是点击登录和退出按钮后程序要执行的操作。为了后续维护方便，采用界面与业务逻辑相分离来实现。也就是通过创建主程序调用界面文件方式实现。这有2个好处。第1就是实现逻辑清晰。第2就是后续如果界面或者逻辑需要变更，好维护。新建call\_login.py文件程序，调用login.py文件。

运行call\_login.py程序，结果如下：

![77793ba1ffe77512cf78f2390e3ec76e.png][]

到这里，界面实现和业务主程序已经写好了。但是现在具体业务功能逻辑还未实现。需要对登录和退出的按钮点击执行相对应的操作。

**添加信号和槽，实现业务逻辑**

实现部分见代码注释。这里主要添加如下两行命令配置信号和槽的关系。信号和槽的创建和原理下文描述。这里可以参照添加即可。

登录按钮：self.login\_Button.clicked.connect(self.display)

退出按钮：self.cancel\_Button.clicked.connect(self.close)

详细代码如下：

运行结果如下：

![8ee58d6e4546ca9f4f089b0a2a2148f7.png][]

用户登录小程序开发完成。但是这个界面还有一个小问题，就是拖动的时候，界面会变形。。看图

![d0625fc14ae224ac2fb5633a1d89810b.png][]

是不是觉得不可忍受。。有两个办法，一种是界面点击使用网格布局，一种是使界面大小不可改变。这里介绍第二种方法。在Qt Designer上修改主界面最大属性中的长宽设置成与最小属性一致。如下：

![2245bc2a2d1785600dbee1b6decf42f6.png][]

这样设置之后，就不允许在窗口左右两边拖动导致界面改变大小，就可以保证主界面中的控件不会变形。

**Pyinstaller打包成.exe文件**

用户登录显示程序界面和逻辑都实现了。下来就是要推广使用了。不是所有人电脑上都安装有python软件或者对应的python版本以及PyQt5工具。那么如何让程序在这些未安装python软件的机子上运行呢？可以使用pyinstaller工具将程序打包成.exe文件。pyinstaller使用方法可以参考《[使用Pyinstaller转换.py文件为.exe可执行程序][Pyinstaller_.py_.exe]》。打包过程如下：

**pyinstaller.exe -F call\_login.py -w**

![50b1089d26898e8e7dd741c9e8a8198c.png][]

打包成功后call\_login.exe在当前目录的dist目录下。执行call\_login.exe，程序可以正确运行。如下：

![523fa0523e1326d25bde00c3038de6b1.png][]

这样，其他人想运行你的程序，就可以直接给他提供call\_login.exe可执行过程序了。

**小结**

本文主要讲述了使用Qt Designer工具实现一个用户登录显示的小需求。通过这个需求可以知道如何使用Qt Designer实现界面开发、.ui文件转换、业务和界面分离实现以及最简单的信号和槽创建。通过这个需求实现过程描述相信你可以参考动手实现你的小需求。起码可以上手实践了。。

实际上这个程序还有很多小问题。。因为用户登录界面控件少，所以没有感觉出来。。就是控件布局管理。就是如何让界面上的控件整齐有序、布局合理美观。

[976d4f3b5aab9d61f0a211191a4b8b08.png]: /images/20221120/8ba8b493639746bcb33f9127ceb796bb.png
[ec84b73e869605e2b6e50d86940ac3c0.png]: /images/20221120/00724c54679f40ada2ef8413ea3d0040.png
[e51f3bc550c47475c2ed9f755726d0b6.png]: https://img-blog.csdnimg.cn/img_convert/e51f3bc550c47475c2ed9f755726d0b6.png
[68e53509d2c0e4c0dce2697a179e96ee.png]: https://img-blog.csdnimg.cn/img_convert/68e53509d2c0e4c0dce2697a179e96ee.png
[18866b9b895b5771fc23ee076074b16b.png]: https://img-blog.csdnimg.cn/img_convert/18866b9b895b5771fc23ee076074b16b.png
[9d00ea6c143d84d6902168ec4a300c9a.png]: https://img-blog.csdnimg.cn/img_convert/9d00ea6c143d84d6902168ec4a300c9a.png
[dbe354ec5e4286ee97ac0eee63467448.png]: https://img-blog.csdnimg.cn/img_convert/dbe354ec5e4286ee97ac0eee63467448.png
[dbae94a7ab0b5ef042a3cd77ee8b94d5.png]: https://img-blog.csdnimg.cn/img_convert/dbae94a7ab0b5ef042a3cd77ee8b94d5.png
[81f5cb0d20712d17d94e9ce54759b079.png]: https://img-blog.csdnimg.cn/img_convert/81f5cb0d20712d17d94e9ce54759b079.png
[77793ba1ffe77512cf78f2390e3ec76e.png]: https://img-blog.csdnimg.cn/img_convert/77793ba1ffe77512cf78f2390e3ec76e.png
[8ee58d6e4546ca9f4f089b0a2a2148f7.png]: https://img-blog.csdnimg.cn/img_convert/8ee58d6e4546ca9f4f089b0a2a2148f7.png
[d0625fc14ae224ac2fb5633a1d89810b.png]: https://img-blog.csdnimg.cn/img_convert/d0625fc14ae224ac2fb5633a1d89810b.png
[2245bc2a2d1785600dbee1b6decf42f6.png]: https://img-blog.csdnimg.cn/img_convert/2245bc2a2d1785600dbee1b6decf42f6.png
[Pyinstaller_.py_.exe]: https://www.jb51.net/article/167024.htm
[50b1089d26898e8e7dd741c9e8a8198c.png]: https://img-blog.csdnimg.cn/img_convert/50b1089d26898e8e7dd741c9e8a8198c.png
[523fa0523e1326d25bde00c3038de6b1.png]: https://img-blog.csdnimg.cn/img_convert/523fa0523e1326d25bde00c3038de6b1.png