PyQT5速成教程之Qt Designer介绍与入门_C/C++

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，点击左上角的绿色加号。

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

最后添加pyrcc用于pyqt5的资源文件转码。具体配置与上述内容相同，arguments填入：

$filename$ -o $filenamewithoutextension$_rc.py

退出之前，点击apply保存配置。配置完成之后，pycharm中会加入3个工具。

点击qtdesigner则打开qtdesigner的界面。

qt designer界面简介

刚打开qt designer，则弹出如下图所示的窗口。

创建新的form给出了5个模板，其中widget与main window最为常用。这里我们选择创建一个main window。

上面界面的最左侧菜单为widget box，widget box中包含pyqt5中的所有widget组件，我们可以从左侧的widget box中拖拽出诸如button、view和input等组件到中间的窗口中。
点击form -> preview（快捷键为ctrl+r）则可以预览我们设计好的界面，也可以用preview in来选择在相应的主题风格下预览。
我们拖拽一个label与button进入主窗口（main window）。

此时在右上角的object inspector（对象查看器）中可以看到主窗口中的已放置的对象（label与pushbutton）以及其相应地qt类。

以label为例，此时我们点击main window中的label或是在object inspector中选取label后，查看右侧的一块区域——property editor（属性编辑器）。

其主要包含属性有如下：

名称	含义
objectname	控件对象名称
geometry	相应宽和高与坐标
sizepolicy	控件大小的策略
minimumsize	最小的宽和高
maximumsize	最大的宽和高
font	字体
cursor	光标

ps：将minimumsize和maximumsize设为一样的数值之后，则窗口的大小固定。

最右下角的部分则为resource browser（资源浏览器），资源浏览器中可以添加相应地如图片素材，作为label或button等控件的背景图片等。

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>
  <x>240</x>
  <y>120</y>
  <width>93</width>
  <height>28</height>
  </rect>
 </property>
 <property name="text">
  <string>pushbutton</string>
 </property>
 </widget>
 </widget>
 <widget class="qmenubar" name="menubar">
 <property name="geometry">
 <rect>
  <x>0</x>
  <y>0</y>
  <width>800</width>
  <height>26</height>
 </rect>
 </property>
 </widget>
 <widget class="qstatusbar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

从.ui文件的第一行我们便能看出，其实质是一个xml文件。ui文件中存放了在主窗口中的一切控件的相关属性。使用xml文件来存储ui文件，具有高可读性和移植性，因此我们可以方便地将.ui文件转换到.py文件，从而使得我们可以使用python语言在设计的gui上面编程。

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

将.ui文件转换到.py文件很简单，在前面我们曾设置了pyuic5这个工具。如果你没有在pycharm中设置这个工具，或者根本没有使用pycharm，则可以到命令行中使用如下命令实现.ui到.py的转换。

pyuic5 - o 目标文件名.py 源文件名.ui

或者直接在pycharm中，找到.ui文件，右键打开菜单找到external tools->pyuic。点击之后，我们在相应工程目录下会产生一个.py文件。（注意，.ui文件必须存放在我们的external tools中设置的相应项目目录下）

转换完成之后，打开.py文件。

# -*- coding: utf-8 -*-

# form implementation generated from reading ui file 'mainwindow.ui'
#
# created by: pyqt5 ui code generator 5.10.1
#
# warning! all changes made in this file will be lost!

from pyqt5 import qtcore, qtgui, qtwidgets

class ui_mainwindow(object):
 def setupui(self, mainwindow):
  mainwindow.setobjectname("mainwindow")
  mainwindow.resize(800, 600)
  self.centralwidget = qtwidgets.qwidget(mainwindow)
  self.centralwidget.setobjectname("centralwidget")
  self.label = qtwidgets.qlabel(self.centralwidget)
  self.label.setgeometry(qtcore.qrect(240, 80, 72, 15))
  self.label.setobjectname("label")
  self.pushbutton = qtwidgets.qpushbutton(self.centralwidget)
  self.pushbutton.setgeometry(qtcore.qrect(240, 120, 93, 28))
  self.pushbutton.setobjectname("pushbutton")
  mainwindow.setcentralwidget(self.centralwidget)
  self.menubar = qtwidgets.qmenubar(mainwindow)
  self.menubar.setgeometry(qtcore.qrect(0, 0, 800, 26))
  self.menubar.setobjectname("menubar")
  mainwindow.setmenubar(self.menubar)
  self.statusbar = qtwidgets.qstatusbar(mainwindow)
  self.statusbar.setobjectname("statusbar")
  mainwindow.setstatusbar(self.statusbar)

  self.retranslateui(mainwindow)
  qtcore.qmetaobject.connectslotsbyname(mainwindow)

 def retranslateui(self, mainwindow):
  _translate = qtcore.qcoreapplication.translate
  mainwindow.setwindowtitle(_translate("mainwindow", "mainwindow"))
  self.label.settext(_translate("mainwindow", "textlabel"))
  self.pushbutton.settext(_translate("mainwindow", "pushbutton"))

观察上述文件，可以看到如果不通过qt designer来制作界面的话，我们将会一次次地调试程序，来讲按钮和label等放在合适的位置，这将是极其痛苦的过程。而通过qt designer，我们可以快速地制作ui，并生成python的代码，从而实现快速地ui的开发。

使用转换的.py文件

然而，此时之间运行这个转换好的python文件是无法显示任何窗口的。因为这个python文件只有定义主窗口以及其控件的代码，并没有程序入口的代码。为了秉持视图与逻辑分离的原则，我们再编写一个新的脚本来调用这个文件，并且创建一个窗口。

import sys
from pyqt5.qtwidgets import qapplication, qmainwindow
from mainwindow import *


class mywindow(qmainwindow, ui_mainwindow):
 def __init__(self, parent=none):
  super(mywindow, self).__init__(parent)
  self.setupui(self)

if __name__ == '__main__':
 app = qapplication(sys.argv)
 mywin = mywindow()
 mywin.show()
 sys.exit(app.exec_())

通过上述代码，我们继承了ui_mainwindow类，使用其构造方法构造主窗口，并定义了程序的入口，通过创建qapplication对象来创建qt窗口。其运行结果如下：