PyQt5学习笔记2 - Designer和Pyuic5

前文

PyQt5学习笔记1 - Windows下安装PyQt5

本文概述

Designer.exe, Pyuic5.exe

一、 Designer

Qt Designer，即Qt设计师，是一个强大，灵活的可视化GUI设计工具，可以帮助我们加快开发PyQt程序的速度。Qt Designer是专门用来制作PyQt程序中UI界面的工具。
Qt Designer符合MVC(模型-视图-控制器)设计模式，做到了显示和业务逻辑的分离。

Qt Designer具有以下优点：

• 使用简单， 通过拖拽和电机就可以完成复杂的界面设计，而且还可以随时预览查看效果图。
• 转换Python文件方便。Qt Designer可以将设计好的用户界面保存为.ui文件，其实是XML格式的文本文件。为了在PyQt中使用.ui文件，可以通过pyuic5命令将.ui文件转换为.py文件。

工具路径：

1. 找到我们Python三方库的目录。*\python380\Lib\site-packages

2. 因为使用pip安装一般都会安装最新版本的PyQt5, 不同版本的PyQt中Designer的路径可能不同，当前我的PyQt(v5.15.2)中，designer.exe存在于目录\qt5_applications\Qt\bin

3. 为了更加方便的使用designer, 可以将其添加到环境变量或者Pycharm的External Tools中。

   1. 添加到环境变量：
      选择此电脑/计算机单击鼠标右键->属性->高级系统设置->环境变量->系统环境变量Path.
      
      在Path里面追加designer.exe的路径，保存退出。cmd输入path查看环境变量是否添加成功。
      

      image.png

   2. Pycharm添加External Tools:
      进入Pycharm->File->Settings->Tools->External Tools->添加按钮
      
      可以看到有几个参数"Name","Description","Program","Arguments","Working directory"。

      "Name"：即我们给工具填写的名称，可以取任意名称
      

      "Program"：即程序，选中Designer.exe即可
      

      "Working directory"：即工作目录，默认是程序目录，推荐修改为我们的文件目录$FileDir$
      

      "Description"：即描述，可写可不写
      

      "Arguments": 即参数，designer可以直接使用，不需要参数，因此可以不写.
      

   其中我们所必须填入的是三个参数"Name","Program"以及"Working directory"
   

   3. 保存即可

      
      
      image.png

使用方法：

1. cmd直接输入designer就可以启动。
2. pycharm菜单栏Tools->External Tools->designer调用启动。

Designer界面介绍

打开designer.exe之后会自动弹出"新建窗体"的对话框。在模板选项中，最常用的就是Widget(通用窗口)和Main Window(主窗口)。 在PyQt5中Widget被分离出来，用来替代Dialog，并将Widget放入了QtWidget模块库中。

模板选择"Mian Window"创建一个主窗口，保存并命名为firstWindow.ui

如图所示主窗口默认添加了菜单栏，工具栏和状态栏。
将整个界面划分为5个区域。如下：

image.png

分别是

1 - Widget Box(工具箱)

WidgetBox中提供了很多控件，每个控件都有自己的名称，提供不同的功能。可以直接拖放到主窗口,在菜单栏->窗体->预览 或者 Ctrl+R 可以预览效果。

2 - MainWindow(主窗口)

主窗口用来展示UI界面的布局，可以任意编辑。

3 - 对象查看器

对象查看器可以查看主窗口中放置的对象列表

4 - 属性编辑器

属性编辑器提供了对窗口，控件，布局的属性编辑功能

5 - 信号/槽编辑器

用来编辑信号/槽以及动作，和资源浏览器

我们可以拖入一个pushButton(按钮)到主窗口，双击按钮重命名为"关闭"，之后保存。

二、 Pyuic5

查看UI文件

采用Qt Designer工具设计的界面文件默认为.ui文件，描述了窗口中控件的属性列表和布局显示，.ui 文件里面包含的内容是按照XML(可扩展标记语言)格式处理的。可以直接使用notepad打开文件。
其中可以看到我们之前添加的一个按钮"关闭"

image.png

转换文件格式

很明显.ui文件并不是python可以直接引用的文件，因此我们需要使用到pyuic5.exe工具.将其转换为.py文件。

PyQt5安装好之后，pyuic5工具默认安装在*\python380\Scripts。是的，这个路径和我们的pip工具在同一个路径下，这意味着我们可以不用添加环境变量就可以去使用它。

我们可以在命令行中输入pyuic5 --help，其中有一个-o的参数，提示write generated code to FILE instead of stdout， 将生成的代码写入文件而不是标准输出。

我们转换格式需要的就是这个参数。因此在命令行输入

>> pyuic5 -o firstWindow.py firstWindow.ui

之后在目录下就会生成一个firstWindow.py的文件，打开看一下，里面已经替我们写好了UI类的代码了。

我们之后直接调用它就可以使用了。

image.png

以上就是PyQt5的Designer和pyuic5工具的简介了。有什么疑问可以在评论中留出~~

---

如有侵权，请联系删除