pyqt5 designer安装步骤
design 需要单独安装。 直接用pip3 install PyQt5-tools会提示找不到安装文件。
https://github.com/altendky/pyqt5-tools/releases/tag/v5.7.dev1
pip install PyQt5-tools -i http://pypi.douban.com/simple --trusted-host=pypi.douban.com
Qt Designer的介绍
在PyQt中编写UI界面可以直接通过代码来实现,也可以通过Qt Designer来完成。Qt Designer的设计符合MVC的架构,其实现了视图和逻辑的分离,从而实现了开发的便捷。Qt Designer中的操作方式十分灵活,其通过拖拽的方式放置控件可以随时查看控件效果。Qt Designer生成的.ui文件(实质上是XML格式的文件)也可以通过pyuic5工具转换成.py文件。
Qt Designer随PyQt5-tools包一起安装,其安装路径在 “Python安装路径\Lib\site-packages\pyqt5-tools”下。
若要启动Qt Designer可以直接到上述目录下,双击designer.exe打开Qt Designer;或将上述路径加入环境变量,在命令行输入designer打开;或在PyCharm中将其配置为外部工具打开。
下面以PyCharm为例,讲述PyCharm中Qt Designer的配置方法。
PyCharm中PyQt5工具配置
打开PyCharm,选择Settings -> Tools -> External Tools,点击左上角的绿色加号。
![](http://upload-images.jianshu.io/upload_images/1794590-a2e78a35e0bb5c7e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
Name填入QtDesigner(方便后续使用,名称无所谓)。Program选择我们安装的PyQt5-tools下面的designer.exe。Working directory则选择我们的工作目录。然后点击OK,则添加了QtDesigner作为PyCharm的外置工具。
然后添加PyUIC(UI转换工具),PyUIC的Program为Python.exe,在Python的安装目录下面的Scripts目录下,Working directory同理设为我们的工作目录,Arguments则填入如下代码:
-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py -x
最后添加pyrcc用于PyQt5的资源文件转码。具体配置与上述内容相同,Arguments填入:
$FileName$ -o $FileNameWithoutExtension$_rc.py
退出之前,点击Apply保存配置。配置完成之后,PyCharm中会加入3个工具。
![](http://upload-images.jianshu.io/upload_images/1794590-362c50ec7d20ee03.png?imageMogr2/auto-orient/strip|imageView2/2/w/543/format/webp)
点击QtDesigner则打开QtDesigner的界面。
Qt Designer界面简介
刚打开Qt Designer,则弹出如下图所示的窗口。
![](http://upload-images.jianshu.io/upload_images/1794590-703b1f9c79b1cb8c.png?imageMogr2/auto-orient/strip|imageView2/2/w/589/format/webp)
创建新的Form给出了5个模板,其中Widget与Main Window最为常用。这里我们选择创建一个Main Window。
![](http://upload-images.jianshu.io/upload_images/1794590-af201ed93ebb4215.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
上面界面的最左侧菜单为Widget Box,Widget Box中包含PyQt5中的所有Widget组件,我们可以从左侧的Widget Box中拖拽出诸如Button、View和Input等组件到中间的窗口中。
点击Form -> Preview(快捷键为Ctrl+R)则可以预览我们设计好的界面,也可以用Preview In来选择在相应的主题风格下预览。
我们拖拽一个Label与Button进入主窗口(Main Window)。
![](http://upload-images.jianshu.io/upload_images/1794590-6b9a5c77d983bb29.png?imageMogr2/auto-orient/strip|imageView2/2/w/814/format/webp)
此时在右上角的Object Inspector(对象查看器)中可以看到主窗口中的已放置的对象(label与pushButton)以及其相应地Qt类。
![](http://upload-images.jianshu.io/upload_images/1794590-aa03726fe99f2f4c.png?imageMogr2/auto-orient/strip|imageView2/2/w/903/format/webp)
以Label为例,此时我们点击Main Window中的label或是在Object Inspector中选取label后,查看右侧的一块区域——Property Editor(属性编辑器)。
![](http://upload-images.jianshu.io/upload_images/1794590-13c4bec849c7fa56.png?imageMogr2/auto-orient/strip|imageView2/2/w/902/format/webp)
其主要包含属性有如下:
名称 | 含义 |
---|---|
objectName | 控件对象名称 |
geometry | 相应宽和高与坐标 |
sizePolicy | 控件大小的策略 |
minimumSize | 最小的宽和高 |
maximumSize | 最大的宽和高 |
font | 字体 |
cursor | 光标 |
... | ... |
PS:将minimumSize和maximumSize设为一样的数值之后,则窗口的大小固定。
最右下角的部分则为Resource Browser(资源浏览器),资源浏览器中可以添加相应地如图片素材,作为Label或Button等控件的背景图片等。
![](http://upload-images.jianshu.io/upload_images/1794590-6f821f5988c9c9b0.png?imageMogr2/auto-orient/strip|imageView2/2/w/896/format/webp)
Qt Designer的UI文件
使用Qt Designer设计保存的文件为.ui格式的文件。
通过保存并使用记事本等软件打开,我们可以看到.ui文件的内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>600</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<widget class="QLabel" name="label">
<property name="geometry">
<rect>
<x>240</x>
<y>80</y>
<width>72</width>
<height>15</height>
</rect>
</property>
<property name="text">
<string>TextLabel</string>
</property>
</widget>
<widget class="QPushButton" name="pushButton">
<property name="geometry">
<rect>