PyQT5 之 Qt Designer 介绍

PyQT5简介

pyqt5是一套Python绑定Digia QT5应用的框架。它可用于Python 2和3。本教程使用Python 3。Qt库是最强大的GUI库之一。pyqt5的官方网站http://www.riverbankcomputing.co.uk/news

pyqt5做为Python的一个模块,它有620多个类和6000个函数和方法。这是一个跨平台的工具包,它可以运行在所有主要的操作系统,包括UNIX,Windows,Mac OS。pyqt5是双重许可。开发者可以在GPL和商业许可之间进行选择。

pyqt5的类别分为几个模块,包括以下:

  • QtCore
  • QtGui
  • QtWidgets
  • QtMultimedia
  • QtBluetooth
  • QtNetwork
  • QtPositioning
  • Enginio
  • QtWebSockets
  • QtWebKit
  • QtWebKitWidgets
  • QtXml
  • QtSvg
  • QtSql
  • QtTest

QtCore:包含了核心的非GUI功能。此模块用于处理时间、文件和目录、各种数据类型、流、URL、MIME类型、线程或进程。

QtGui包含类窗口系统集成、事件处理、二维图形、基本成像、字体和文本。

qtwidgets模块包含创造经典桌面风格的用户界面提供了一套UI元素的类。

QtMultimedia包含的类来处理多媒体内容和API来访问相机和收音机的功能。

Qtbluetooth模块包含类的扫描设备和连接并与他们互动。描述模块包含了网络编程的类。这些类便于TCP和IP和UDP客户端和服务器的编码,使网络编程更容易和更便携。

Qtpositioning包含类的利用各种可能的来源,确定位置,包括卫星、Wi-Fi、或一个文本文件。

Enginio模块实现了客户端库访问Qt云服务托管的应用程序运行时。

Qtwebsockets模块包含实现WebSocket协议类。

QtWebKit包含一个基于Webkit2图书馆Web浏览器实现类。

Qtwebkitwidgets包含的类的基础webkit1一用于qtwidgets应用Web浏览器的实现。

QtXml包含与XML文件的类。这个模块为SAX和DOM API提供了实现。

QtSvg模块提供了显示SVG文件内容的类。可伸缩矢量图形(SVG)是一种描述二维图形和图形应用的语言。

QtSql模块提供操作数据库的类。

QtTest包含的功能,使pyqt5应用程序的单元测试

详细介绍参考链接:http://code.py40.com/pyqt5/14.html

Qt Designer的介绍

在PyQt中编写UI界面可以直接通过代码来实现,也可以通过Qt Designer来完成。Qt Designer的设计符合MVC的架构,其实现了视图和逻辑的分离,从而实现了开发的便捷。Qt Designer中的操作方式十分灵活,其通过拖拽的方式放置控件可以随时查看控件效果。Qt Designer生成的.ui文件(实质上是XML格式的文件)也可以通过pyuic5工具转换成.py文件。

安装

pip install pyqt5
pip install pyqt5-tools

PyQt5工具配置

以Vscode为例:

1.打开文件>首选项>设置

搜索:pyuic5和designer

pyuic5我的为默认配置:
PyQT5 之 Qt Designer 介绍_第1张图片

designer:
PyQT5 之 Qt Designer 介绍_第2张图片
designer路径先去python安装路径下找:

D:\Program Files (x86)\Lib\site-packages\pyqt5_tools\bin\designer

找不到再去:

D:\Program Files (x86)\Lib\site-packages\qt5_applications\Qt\bin\designer

2.选择PYQT:New Form的话,就会打开qt designer 界面编辑器。

PyQT5 之 Qt Designer 介绍_第3张图片
创建新的Form给出了5个模板,其中Widget与Main Window最为常用。这里我们选择创建一个Main Window。
PyQT5 之 Qt Designer 介绍_第4张图片
到这里我们的界面就创建好了。

界面构成介绍

左侧的 Widget Box 是各种可以自由拖动的组件

PyQT5 之 Qt Designer 介绍_第5张图片
控件箱简介
Layouts 布局 (选中控件 – Lay out(右键) – 选择布局)

  • Vertical Layout: 垂直布局
  • Horizontal Layout: 水平布局
  • Grid Layout: 网格布局 (划分为 行 和 列)
  • Form Layout: 表单布局 (左列标签, 右列控件)

Containers 容器

  • Group Box
  • Scroll Area
  • Tool Box
  • Tab Widge
  • Stacked Widget
  • Frame: 帧容器, 可放入布局 / 控件等
  • Widget: 窗口容器
  • MDI Area
  • Dock Widget

Item Widgets 条目控件

  • List Widget: 列表条目
  • Tree Widget: 树形条目
  • Table Widget: 标签页条目

Spacers 间隔(透明)

  • Horizontal Spacer: 水平间隔
  • Vertical Spacer: 垂直间隔

Buttons 按钮

  • Push Button: 按钮
  • Tool Button: 工具箱按钮 (…)
  • Radio Button: 单选框
  • Check Box: 多选框
  • Command Link Button:
  • Dialog Button Box: Dialog 按钮 (ok | cancel)

nput Widgets 输入控件

  • Combo Box: 下拉框
  • Font Combo Box: 字体下拉框
  • Line Edit: 行文本编辑框
  • Text Edit: 文本编辑框
  • Plain Text Edit: 文本编辑框
  • Spin Box: 选择整数值
  • Double Spin Box: 选择浮点数值
  • Time Edit: 时间选择框
  • Data Edit: 日期选择框
  • Data/Time Edit: 日期 时间 选择框
  • Dial: 圆形滚动表盘
  • Horizontal Scroll Bar: 水平滚动条
  • Vertical Scroll Bar: 垂直滚动条
  • Horizontal Slider: 水平拖动条
  • Vertical Slider: 垂直拖动条
  • Key Sequence Edit: 按键编辑框

Display Widgets 显示控件

  • Label: 标签 (显示文字 / 图片等)
  • Text Browser: 文本浏览(不可编辑)
  • Graphics View: 绘画
  • Calendar Widget: 日历
  • LCD Number: LCD数字显示屏
  • Progress Bar: 进度条
  • Horizontal Line: 水平线
  • Vertical Line: 垂直线
  • OpenGL Widget: OpenGl

中间的 MainWindow - untitled 窗体是画布,可以在上面放组件
PyQT5 之 Qt Designer 介绍_第6张图片
右上方的 Object Inspector 可以查看当前 UI 的结构
PyQT5 之 Qt Designer 介绍_第7张图片
右侧中部的 Property Editor 可以设置当前选中组件的属性
PyQT5 之 Qt Designer 介绍_第8张图片
控件属性简介

objectName: 控件对象名

geometry: 相对坐标(px) x,y,width,height

sizePolicy: 控件大小策略

  • Fixed: 控件有 sizeHint 尺寸且尺寸不变
  • Minimum: 控件有 sizeHint 最小尺寸, 尺寸可变大
  • Maximum: 控件有 sizeHint 最大尺寸, 尺寸可变小
  • Preferred: 控件有 sizeHint 期望尺寸, 有minisizeHint最小尺寸, 尺寸可变大
  • Expanding: 控件有 minisizeHint 最小尺寸, 希望更大尺寸
  • MinimumExpanding: 控件有 sizeHint 最小尺寸, 希望更大磁村
  • Ignored: 无视 sizeHint 和 minisizeHint, 按默认设置

minimumSize: 最小尺寸

maximumSize: 最大尺寸 (固定尺寸: minimumSize=maximumSize)

font: 字体

cursor: 光标

windowTitle: 窗口标题

WindowsIcon: 窗口图标

iconSize: 图标大小

toolTip: 提示泡提示信息

statusTip: 状态栏提示信息

text: 控件文本

shortcut: 快捷键

horizontalSpacer: 水平间距

右下方的 Resource Browser 可以添加各种素材,比如图片,背景等等,暂时无视。
PyQT5 之 Qt Designer 介绍_第9张图片
菜单栏

菜单栏通过双击 Type Here 添加一级菜单(File), 点开一级菜单双击 Type Here 添加动作(New File), 若点了后面的+, 并添加动作(Text File), 则动作(New File)将变成子菜单.
PyQT5 之 Qt Designer 介绍_第10张图片
并且我们可以在 动作编辑器 里修改 菜单里的动作

PyQT5 之 Qt Designer 介绍_第11张图片

了解清楚界面后就可以进行实战开发了

实战

用QtDesigner设计一个登录界面,用QTDesigner设计界面简单多了,而且更加直观。先看下效果图:

PyQT5 之 Qt Designer 介绍_第12张图片
那么接下来一步一步完成该功能。

(1)打开QT界面设计工具QTDSIGNER
若未安装,请参考上文

已经安装好之后,在“Python安装路径\Lib\site-packages\pyqt5_tools\Qt\bin”找到designer.exe。双击打开

(2)选择WDIGET,创建界面
(3)在窗口中添加控件,并修改位置和大小
通过拖拽的方式,分别在窗口添加如下控件,Lable、pushButton、QlineEdit、QcheckBox,并修改起大小和位置,如图所示:
PyQT5 之 Qt Designer 介绍_第13张图片
(4)修改控件属性,并保存UI文件

修改输入密码的QlineEdit的echoMode的属性为Password
PyQT5 之 Qt Designer 介绍_第14张图片
(5)把.UI文件转换成.PY文件

使用如下命令,把designer_login.ui文件转换成designer_login.py文件

pyuic5 -o designer_login.py designer_login.ui

pyuic5命令实现ui文件到py文件的转换,该命令的格式为:pyuic5 -o 目标文件 源文件

(6)编写主程序,调用UI程序


#coding=utf-8
import sys
from PyQt5.QtWidgets import QMainWindow,QApplication
 
import designer_login
 
####################### 全局变量#########################
app = QApplication(sys.argv)
 
class MyWindows(designer_login.Ui_Form, QMainWindow):
    def __init__(self):
        super(MyWindows, self).__init__()
        self.setupUi(self)
my_windows = MyWindows()  # 实例化对象
my_windows.show()  # 显示窗口
 
sys.exit(app.exec_())

PyQT5 之 Qt Designer 介绍_第15张图片

Pyinstaller打包成.exe文件

用户登录显示程序界面和逻辑都实现了。下来就是要推广使用了。不是所有人电脑上都安装有python软件或者对应的python版本以及PyQt5工具。那么如何让程序在这些未安装python软件的机子上运行呢?可以使用pyinstaller工具将程序打包成.exe文件。pyinstaller使用方法可以参考《使用Pyinstaller转换.py文件为.exe可执行程序》。打包过程如下:

pyinstaller.exe -F call_login.py -w

另一种带库的打包方式:

pyinstaller -w call_login.py

你可能感兴趣的:(python,pyqt5)