PyQt5快速上手应用篇1-设计串口工具GUI界面

前言

本节我们使用PyQt5的Designer.exe设计项目UI界面，Designer.exe一个极大的好处就是可以随意拖动控件布局，轻松实现界面设计。

一、实例

1. QT Designer设计UI

打开designer.exe,使用默认的Main Window创建，直接点击Create按钮即可。

设计Main Window主页面如下，菜单栏中菜单分别为编辑、显示、工具、帮助，状态栏默认在最下方，可以在下方右键选择Remove Status Bar删除。

其中Combox主要用来串口配置信息，设计方式如下：

Radio Button组件用来供用户选择ASCII还是HEX方式处理数据，设计如下：

check Box用来设置工具配置信息，具体设计如下：

Spin box用来选择实现一个拨码效果切换重复发送时间，设计方法如下

串口信息显示和输入使用textBrowser，设计方式如下：

groud Box可以按组分类设计，拖动时候内部控件跟随着groud Box拖动，设计如下：

菜单栏实现也比较简单，方法如下：

toolBar实现稍微复杂点，需要首先右键选择Add tool Bar，然后再Designer右下方的Action Editor工具栏设计Action，然后将Action拖到toolBar即可，具体设计方法，参考"PyQt5快速上手基础篇8-菜单栏、工具栏和状态栏"。

2 将*.ui转换为ui_uart_tool.py

进入run.py目录，输入如下命令：

pyuic5-oui_uart_tool.pyuart_tool.ui

3 编写python程序

# encoding=utf-8

import sys

import PyQt5.QtWidgets as qw

import ui_uart_tool

if__name__ == "__main__":

app=qw.QApplication(sys.argv)    

w = qw.QMainWindow()

ui=ui_uart_tool.Ui_MainWindow()    

ui.setupUi(w)    

w.show()    

sys.exit(app.exec_())

上述程序启动时候将会调用QDesigner设计好的UI界面。

二、运行

进入文件目录，输入python3 run.py,即可弹出上述用QT Designer设计出来的MainWindow页面。

由此可知，我们已经可以成功显示QDesigner设计的界面了。

三、结语

(1)窗口布局

其实QDesigner支持布局管理器，本文是直接手动拖动，简单粗暴，不过整体外观也不太差，哈哈，终于摆脱写代码布局的悲惨命运！

(2)获取资料

gitee仓库地址：https://gitee.com/iot_camp/pyqt5/

一叶孤沙出品：一沙一世界，一叶一菩提