使用可视化设计窗体的GUI程序

2019-08-29 15:38:28

示例Demo2_1用PyQt5的一些类创建了一个简单的GUI应用程序，窗体及窗体上的标签对象的创建和属性设置都完全由代码完成。显然这种纯代码方式构造UI的方式是比较麻烦的，特别是在窗体上组件比较多、层次比较复杂的时候，纯代码方式构造界面的工作量和难度可想而知。

Qt提供了可视化界面设计工具Qt Designer，以及Qt Creator中内置的UI Designer。可视化地设计UI窗体可以大大提高GUI应用程序开发的工作效率。

本节通过示例Demo2_2演示如何用UI Designer可视化设计UI窗体，然后转换为Python程序，再构建为Python的GUI程序。主要工作步骤如下。

（1）在UI Designer中可视化设计窗体。

（2）用工具软件pyuic5将窗体文件（.ui文件）转换为Python程序文件。

（3）使用转换后的窗体的Python类构建GUI应用程序。

2.2.1 用UI Designer可视化设计窗体

在Qt Creator中点击菜单项“File”→“New File or Project…”，在出现的对话框里选择“Qt”分组里的“Qt Designer Form”（如图2-2所示），这将创建一个单纯的窗体文件（.ui文件）。

在图2-2的对话框中点击“Choose…”按钮后，出现如图2-3所示的窗体模板选择界面。窗体模板主要有以下3种。

Dialog模板，基于QDialog类的窗体，具有一般对话框的特性，如可以模态显示、具有返回值等。

Main Window模板，基于QMainWindow类的窗体，具有主窗口的特性，窗口上有主菜单栏、工具栏、状态栏等。

Widget模板，基于QWidget类的窗体。QWidget类是所有界面组件的基类，如QLabel、QPushButton等界面组件都是从QWidget类继承而来的。QWidget类也是QDialog和QMainWindow的父类，基于QWidget类创建的窗体可以作为独立的窗口运行，也可以嵌入到其他界面组件内显示。

图2-2 新建窗体对话框

图2-3 选择Widget模板

在图2-3的界面上选择Widget模板。点击“Next”按钮后，在出现的对话框里设置文件名为FormHello.ui，文件保存到Demo2_2的目录下，再根据向导提示完成创建即可。创建了窗体后就可以在Qt Creator内置的UI Designer里可视化设计窗体，图2-4是在窗体上放置了标签和按钮，并设置好各种属性后的界面。

图2-4的UI Designer窗口有以下一些功能区域。

组件面板。窗口左侧是界面设计组件面板，分为多个组，如Layouts、Buttons、Display Widgets等，界面设计的常用组件都可以在组件面板里找到。

中间区域是待设计的窗体。如果要将某个组件放置到窗体上，从组件面板上拖动一个组件放到窗体上即可。例如，放一个Label组件和一个PushButton组件到窗体上。

Action编辑器（Action Editor）和Signals Slots编辑器（Signals Slots Editor），位于待设计窗体下方。Action编辑器用于设计Action，Signals Slots编辑器用于可视化地进行信号与槽的关联，后面会介绍其具体使用。

对象浏览器（Object Inspector）。窗口右上方是对象浏览器，用树状视图显示窗体上各组件之间的布局和包含关系，视图有两列，显示每个组件的对象名称（objectName）和类名称。

属性编辑器（Property Editor）。窗口右下方是属性编辑器，显示某个选中的组件或窗体的各种属性及其值，可以在属性编辑器里修改这些属性的值。

主窗口上方有窗体设计模式和布局管理工具栏，左侧还有一个工具栏，这些功能在后面详细介绍Qt Creator的使用时再具体介绍。

图2-4 在Qt Creator里可视化设计窗体

在设计窗体上用鼠标点选一个组件，在属性编辑器里会显示其各种属性，并且可以修改其属性。例如，图2-5是选中窗体上放置的标签组件后属性编辑器的内容。

图2-5 界面组件的属性编辑器

图2-5展示的属性编辑器的上方显示的文字“LabHello: QLabel”表示这个组件是一个QLabel类的组件，objectName是LabHello。属性编辑器的内容分为两列，其中Property列是属性的名称，Value列是属性的值。属性又分为多个组，实际上表示了类的继承关系，例如在图2-5中，可以看出QLabel的继承关系是QObject→QWidget→QFrame→QLabel。

objectName是组件的对象名称，界面上的每个组件都需要一个的对象名称，以便被引用。界面上的组件的命名应该遵循一定的法则，具体使用什么样的命名法则根据个人习惯而定，主要目的是便于区分和记忆，也要便于与普通变量相区分。

设置组件属性的值只需在属性编辑器里进行修改即可，例如设置LabHello的text属性为“Hello, by UI Designer”，只需如图2-5所示那样修改text属性的值即可。

表2-1是所设计的窗体，以及窗体上的标签和按钮的主要属性的设置。

表2-1 窗体以及各组件的主要属性设置

objectName类名称属性设置备注FormHelloQWidgetwindowTitle=”Demo2_2”设置窗体的标题栏显示文字btnCloseQPushButtonText=”关闭”设置按钮的显示文字LabHelloQLabelText=”Hello, by UI Designer” Font.PointSize=12 Font.bold=True设置标签显示文字和字体

窗体设计完成后，将这个窗体保存为文件FormHello.ui。

提示：一般情况下，保存的.ui文件名与窗体的objectName名称一致，这样通过文件名就可以直接知道窗体的名称。

窗体文件FormHello.ui实际上是一个XML文件，它记录了窗体上各组件的属性以及位置分布。FormHello.ui的XML文件内容不必去深入研究，它是由UI Designer根据可视化设计的窗体自动生成的。使用IDLE的文件编辑器就可以打开FormHello.ui文件，下面是FormHello.ui文件的内容。

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>FormHello</class>
 <widget class="QWidget" name="FormHello">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>0</y>
 <width>283</width>
 <height>156</height>
 </rect>
 </property>
 <property name="windowTitle">
 <string>Demo2_2</string>
 </property>
 <widget class="QLabel" name="LabHello">
 <property name="geometry">
 <rect>
 <x>50</x>
 <y>40</y>
 <width>189</width>
 <height>16</height>
 </rect>
 </property>
 <property name="font">
 <font>
 <pointsize>12</pointsize>
 <weight>75</weight>
 <bold>true</bold>
 </font>
 </property>
 <property name="text">
 <string>Hello, by UI Designer</string>
 </property>
 </widget>
 <widget class="QPushButton" name="btnClose">
 <property name="geometry">
 <rect>
 <x>100</x>
 <y>90</y>
 <width>75</width>
 <height>23</height>
 </rect>
 </property>
 <property name="text">
 <string>关闭</string>
 </property>
 </widget>
 </widget>
 <resources/>
 <connections/>
</ui>