PyQT5 之 Qt Designer 介绍与入门

2019/7/23 17:28:52 人评论 次浏览 分类:学习教程

 

From:https://www.jianshu.com/p/5b063c5745d0

养薛定谔的猫 简书:https://www.jianshu.com/u/bf82b363ae88

 

 

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个工具。

 

 

Qt Designer 界面简介

 

点击 QtDesigner 打开 QtDesigner 的界面,弹出如下图所示的窗口。

创建新的 Form 给出了5个模板,其中 Widget 与 MainWindow 最为常用。这里我们选择创建一个 MainWindow。

上面界面的最左侧菜单为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窗口。其运行结果如下:

通过上述操作,我们熟悉了Qt Designer设计界面,到实现业务逻辑的大致工作流程。通过这个工作流程可以简化工作,实现速度的提升。
通过对视图与业务逻辑的分离,在每次更改Qt Designer的UI设计的时候,也不用重新编写代码,而只需对更改的部分做稍微的修改即可。

 

 

PyQT5速成教程-3 布局管理

 

布局(Layout)管理

Qt Designer中,在工具箱中最上方可以看到有4种布局。分别是垂直布局、水平布局、栅格布局和表单布局。

布局名称 布局含义
垂直(Vertical)布局 布局内的控件按照从上到下的顺序纵向排列
水平(Horizontal)布局 布局内的控件按照从左到右的顺序横向排列
栅格(Grid)布局 将控件放入栅格中,然后划分成若干行与若干列,并且将每个窗口控件放在合适的单元中
表单(Form)布局 控件以两列布局在表单中,左列包含标签,右列包含输入控件

在Qt Designer中实现布局有两种方式,通过布局管理器进行布局和通过容器控件进行布局。

 

布局管理器

让我们在左侧的工具箱中随意拖动一些诸如按钮、标签、输入框等控件到主窗口中。

由于刚才是随意拖拽至主窗口,因此所有控件的排放是乱七八糟的。此时,我们不选中任何控件,在空白处点击右键,找到弹出菜单最下方的Layout布局。

可以看到,在右键菜单中可以指定布局的方式以及相应布局方式的快捷键。这里我们选择Lay Out Vertically(垂直布局),整个主窗口内的所有控件一瞬间都垂直着排列整齐了。

此时如果需要调整垂直布局的顺序,只需按住待调整的控件,上下拖动即可。但是这样布局是针对整个窗口的,有时我们需要让不同的布局有父子关系的继承。那么这时就不能单纯地在空白的地方点击右键来布局了。
让我们再次点击右键 -> Lay Out -> Break Lay Out来打开(取消)布局。选中需要水平布局的2个控件,选中后点击右键,水平布局。再选中另外两个控件,选择水平布局。此时的主窗口应该如图所示:

最后,我们再将两个布局选中,点击右键垂直布局,来排列两个水平布局。

最后在空白区域再次使用垂直布局。这样即使我们缩放窗口,整个窗口内的控件也会跟着窗口的变化做出相应改变了。

在上述操作的过程中,我们的一系列操作有决定这些物体的父子关系(层级关系)。而其层级关系在对象查看器中可以直观地看出。

 

布局管理生成的代码

让我们把前面制作的布局保存为.ui文件,并使用PyUIC转换为.py文件。

...
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout_4 = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout_4.setObjectName("verticalLayout_4")
        self.verticalLayout_3 = QtWidgets.QVBoxLayout()
        self.verticalLayout_3.setObjectName("verticalLayout_3")
        self.horizontalLayout = QtWidgets.QHBoxLayout()
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setObjectName("label")
        self.horizontalLayout.addWidget(self.label)
        self.checkBox = QtWidgets.QCheckBox(self.centralwidget)
        self.checkBox.setObjectName("checkBox")
        self.horizontalLayout.addWidget(self.checkBox)
        self.verticalLayout_3.addLayout(self.horizontalLayout)
        self.horizontalLayout_2 = QtWidgets.QHBoxLayout()
        self.horizontalLayout_2.setObjectName("horizontalLayout_2")
        self.radioButton = QtWidgets.QRadioButton(self.centralwidget)
        self.radioButton.setObjectName("radioButton")
        self.horizontalLayout_2.addWidget(self.radioButton)
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setObjectName("pushButton")
        self.horizontalLayout_2.addWidget(self.pushButton)
        self.verticalLayout_3.addLayout(self.horizontalLayout_2)
        self.verticalLayout_4.addLayout(self.verticalLayout_3)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 241, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
...

从上面的代码中,我们找到关键的几行。如定义label的时候,是如下代码:

        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setObjectName("label")
        self.horizontalLayout.addWidget(self.label)

其中,最后一行将label添加为了horizontalLayout的子物体。

        self.horizontalLayout_2.addWidget(self.pushButton)
        self.verticalLayout_3.addLayout(self.horizontalLayout_2)
        self.verticalLayout_4.addLayout(self.verticalLayout_3)

后面的几行代码,如verticalLayout_3将horizontalLayout_2作为了其子物体;verticalLayout_4将verticalLayout_3作为了其子物体。这些都是与我们在Qt Designer中做的操作是一样的。

 

使用容器进行布局

容器(Container)指的就是能容纳其他子控件的一个控件。使用容器控件可以将容器控件中的所有控件归为一类,从而区别于其他的控件。当然,正如上文提到过的,使用容器也可以对控件进行布局。

首先,从左侧的Container中拖出一个Frame控件到主窗口中,再拖出一个label、line input和button到Frame中。此时Frame中的控件应该是如下图:

但选中Frame控件,点击右键-> Lay Out -> Lay Out Horizontally 则会自动水平排列Frame中的三个控件。

当我们需要变更Frame的位置的时候,可以直接拖动Frame到相应地位置,这样管理更加方便。使用容器进行布局的实质也是使用容器管理器进行布局的。

 

绝对布局

我们前面的学习重点放在了布局管理器上面。但是最简单的布局则是之间输入控件的Geometry属性值。

在属性编辑器中,我们通过修改X Y值来将控件放置在相应地位置,通过修改Width和Height来更改其高度。让我们通过如下表格来解读一下这个Button的Geometry属性。

名称 含义
X 290 控件的最左上角距离主窗口的左侧290px
Y 140 控件的最左上角距离主窗口的上方140px
Width 93 按钮的宽度为93px
Height 28 按钮的高度为23px

而上述的Geometry属性在.py代码中是如下体现的:

self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setGeometry(QtCore.QRect(290, 140, 93, 28))
self.pushButton.setObjectName("pushButton")

可以看到,上述代码的第二行通过setGeometry方法指定了Geometry属性的四个值。通过以上的方法,我们可以对任何一个控件进行布局。

 

 

Qt Designer实战 - 设计一个计算器界面

 

使用网格布局(Grid Layout)

首先分析我们的整数计算器需要的一些按钮:
数字键:0-9共10个。
操作符:+ - * / = CE共6个
当我们在Qt Designer的主窗口中创建上述16个按钮之后,按照4行4列的顺序进行摆放。

并且修改按钮的属性中的objectName为相对于的名称。如数字0的objectName设置为Num_0,操作符+的objectName设置为OP_plus。对于按钮的显示名称的修改,在主窗口中双击相应按钮则可以快速修改。
由于计算器中的按钮是正方形的(我们通常会选择正方形),而且不想让这些按钮根据窗口的大小进行变化,通过全选16个按钮(在主窗口中使用鼠标左键拖出选择框,选中16个按钮)在右侧找到mininumSize和maximumSize属性。点击其左面的箭头符号展开选项,将其宽和高固定为60。这样就不会因为缩放窗口而造成按钮的大小变化了。

在对所有按钮完成相应操作之后,我们选中16个按钮,点击右键,使用网格布局来实现布局。

 

使用Spacer增加空白间隔

我们在计算器上面新建一个Line Edit用来显示输入结果与计算结果。

通过在空白地方右键,对主窗口使用Vertical Lay Out。

此时,我们实现了一个计算器的布局。但显示框与下面的键盘举例太过近了。这时我们便需要使用左侧工具箱内的Spacer控件。

Spacer顾名思义,分隔器。可以通过以占位的形式来将布局中的不同控件分开部分举例。
此时,我们拖动一个Vertical Spacer到Line Edit与下面的键盘之间。同样,Horizontal Spacer也可以用来水平地分离控件之间的距离。

虽然Spacer在我们的Qt Designer编辑器中是以蓝色的类似弹簧的外观存在的,但是在真正的窗体中,Spacer是隐形的。

但这时的Spacer大小和Line Edit的大小都不是我想要的,而且也无法通过鼠标来拖动。如果想要改变这些,则需要进一步了解这些控件的一些属性。

 

sizePolicy 尺寸策略

在Qt Designer中,控件的尺寸是可以变化的。每个控件都拥有sizeHint和minisizeHint两个尺寸。其一,sizeHint即尺寸提示;其二,minisizeHint则是最小尺寸。尺寸提示也是控件的期望尺寸,最小尺寸即窗口可以被压缩到的最小的尺寸。sizePolicy与sizeHint和minisizeHint息息相关。
对于布局管理器中的布局无法满足我们的要求的时候,sizePolicy属性便派上了用场。

sizePolicy可以实现控件的微调。sizePolicy中共有如下几种水平和垂直策略。

 

策略 中文 含义
Fixed 固定 窗口控件具有sizeHint提示的尺寸且尺寸不变
Minimum 最小 窗口控件的sizeHint提示的尺寸即最小尺寸,窗口控件不能比这个值小,但是可以变大
Maximum 最大 窗口控件的sizeHint提示的尺寸即最大尺寸,窗口控件不能比这个值大,但是可以压缩到minisizeHint的尺寸
Preferred 期望 窗口控件的sizeHint提示的尺寸是期望的尺寸,可以压缩到minisizeHint尺寸,也可以比sizeHint尺寸更大
MinimumExpanding 最小扩展 窗口控件的sizeHint提示的尺寸是最小尺寸,不能缩得比这个尺寸小,但是这个控件期望可以比这个尺寸大
Expanding 扩展 窗口控件可以缩小到minisizeHint的尺寸,也可以比sizeHint的的尺寸大,但期望是更大
Ignored 忽略 无视窗口控件的sizeHint与minisizeHint,按照默认来设置

在sizePolicy的Horizontal Policy和Vertical Policy下面还有Horizontal Stretch和Vertical Stretch两个属性。

让我们找到Spacer,并修改其属性的Height为10。

并将其sizeType修改为Fixed固定。此时,观察左面的计算器的主界面显示栏Line Edit与下面的键盘之间的间距变小了。

 

 

 

 

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->