pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面

前言

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

一、实例

1. QT Designer设计UI

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

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第1张图片

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

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第2张图片

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

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第3张图片

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

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第4张图片

check Box用来设置工具配置信息,具体设计如下:

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第5张图片

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

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第6张图片

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

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第7张图片

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

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第8张图片

菜单栏实现也比较简单,方法如下:

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第9张图片

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

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第10张图片

2 将*.ui转换为ui_uart_tool.py

进入run.py目录,输入如下命令:

pyuic5 -o ui_uart_tool.py uart_tool.ui

3 编写python程序

# encoding=utf-8

import sys

import PyQt5.QtWidgets as qw

import ui_uart_tool

num = 0

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页面。

pyqt5 实现右键自定义_PyQt5快速上手应用篇1-设计串口工具GUI界面_第11张图片

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

三、结语

(1)窗口布局

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

(2)获取资料

github仓库地址:https://github.com/solitary-sand/pyqt5/

寄语:一沙一世界,一叶一菩提

你可能感兴趣的:(pyqt5,实现右键自定义)