PyQT5速成教程之QtDesigner介绍与入门.pdf

PyQT5速成教程之QtDesigner介绍与⼊门

QtDesigner的介绍

在PyQt中编写UI界⾯可以直接通过代码来实现，也可以通过QtDesigner来完成。QtDesigner的设计符合MVC的架构，其实

现了视图和逻辑的分离，从⽽实现了开发的便捷。QtDesigner中的操作⽅式⼗分灵活，其通过拖拽的⽅式放置控件可以随时

查看控件效果。QtDesigner⽣成的.ui⽂件（实质上是XML格式的⽂件）也可以通过pyuic5⼯具转换成.py⽂件。

QtDesigner随PyQt5-tools包⼀起安装，其安装路径在“Python安装路径安装路径下。

若要启动QtDesigner可以直接到上述⽬录下，双击designer.exe打开QtDesigner；或将上述路径加⼊环境变量，在命令⾏输

⼊designer打开；或在PyCharm中将其配置为外部⼯具打开。

下⾯以PyCharm为例，讲述PyCharm中QtDesigner的配置⽅法。

PyCharm中PyQt5⼯具配置

打开PyCharm，选择Settings-Tools-ExternalTools，点击左上⾓的绿⾊加号。

Name填⼊QtDesigner（⽅便后续使⽤，名称⽆所谓）。Program选择我们安装的PyQt5-tools下⾯的designer.exe。Working

directory则选择我们的⼯作⽬录。然后点击OK，则添加了QtDesigner作为PyCharm的外置⼯具。

然后添加PyUIC（UI转换⼯具），PyUIC的Program为Python.exe，在Python的安装⽬录下⾯的Scripts⽬录下，Working

directory同理设为我们的⼯作⽬录，Arguments则填⼊如下代码：

-mPyQt5.uic.pyuic$FileName$-o$FileNameWithoutExtension$.py

最后添加pyrcc⽤于PyQt5的资源⽂件转码。具体配置与上述内容相同，Arguments填⼊：

$FileName$-o$FileNameWithoutExtension$_rc.py

退出之前，点击Apply保存配置。配置完成之后，PyCharm中会加⼊3个⼯具。

点击QtDesigner则打开QtDesigner的界⾯。

QtDesigner界⾯简介

刚打开QtDesigner，则弹出如下图所⽰的窗⼝。

创建新的Form给出了5个模板，其中Widget与MainWindow最为常⽤。这⾥我们选择创建⼀个MainWindow。

上⾯界⾯的最左侧菜单为WidgetBox，WidgetBox中包含PyQt5中的所有Widget组件，我们可以从左侧的WidgetBox中拖拽

出诸如Button、View和Input等组件到中间的窗⼝中。

点击Form-Preview（快捷键为Ctrl+R）则可以预览我们设计好的界⾯，也可以⽤PreviewIn来选择在相应的主题风格下预

览。

我们拖拽⼀个Label与Button进⼊主窗⼝（MainWindow）。

此时在右上⾓的ObjectInspector（对象查看器）中可以看到主窗⼝中的已放置的对象（label与pushButton）以及其相应地Qt

类。

以Label为例，此时我们点击MainWindow中的label或是在ObjectInspector中选取label后，查看右侧的⼀块区域——Property

Editor（属性编辑器）。

其主要包含属性有如下：

名称含义

objectName控件对象名称

名称含义

geometry相应宽和⾼与坐标

sizePolicy控件⼤⼩的策略

minimumSize最⼩的宽和⾼

maximumSize