本科毕设被研导要求添加可视化界面展示结果功能以填补实验室的需求,同时需要做好来自MatLab与python的接口。由于实验室大量项目工作在演示时需要使用界面,常有同门前来问询,而此工作中有大量踩坑踩雷需要注意,空口说自然不如图文来的明白完整,故写此系列博客,以避免不必要的时间浪费。
文章并非专业的界面设计教程,唯一写作目的为帮助不希望透彻理解PyQt5的人能够制作界面以回应导师/领导等人的期待,满足教学/项目等需求,为避免误导,以入职软件公司为目的请勿借鉴本博客。
/pyc0551/article/details/131243223https:///pyc0551/article/details/131243223
1.推荐的基本设计流程
1.1确定程序的框架
将设计过程中可能需要用到的界面跳转、关键的函数写于纸上或铭记于脑中,确定好所需要用到的界面与子界面数量。
1.2打开Qt Designer,对各个界面进行设计。
1.3在主文件中,撰写界面的主控逻辑结构、编辑自定义函数的具体实现。
1.4将所需汇报成果的模块接入预留接口,撰写具体的展示方式逻辑等。
2.设计过程中的Qt Designer基本操作
2.1程序固件与信号基本设置
在新建文件之后,可以直接将左边固件栏中的固件拖入窗口中,其大小、位置都可以通过直接在窗口内拖拽进行大致调整。窗口与固件的大小、位置可以通过右边栏中的基本信息进行微调,固件的名称、内容文字、大小、格式等同样可以在右边栏中进行调整。
信号的收发与自定义信号的声明需要在信号/槽编辑器中进行,同时可以使用设计器左上角的编辑信号模式如上图,这一模式下支持在窗口中直接拖拽信号线来设置信号的收发。需要注意的是,对于自定义信号,建议收取信号设置为“接地”,即将信号线从发出固件上拖出后不连接到任何其他固件上,而是至于空白处,此时窗口中会被显示为“接地”符号。
如上左图,左边的框内为发出信号的条件,当前选择的是指针悬停。右边框内则是发出的信号指令,自定义的函数需要点击编辑,则会来到如上右图。此时需要点击槽框下的加号,设定函数的名称,后续再在界面的逻辑程序内定义这一函数具体行为。
2.2图片显示的基本设置
在将图片添加进界面之前,首先需要在资源浏览器中将其声明。
点击编辑(上左图中铅笔)图标,弹出上右图的窗口。上右图中左边框内是Qt Designer所生成的.qrc文件,其用途是作为程序所需的图片清单,右边框内则是图片的前缀与具体名称。首先对不同的界面新建出不同的清单文件,再对具体用途新建前缀、添加位置。上右图中,我已建立了清单文件,右边则根据具体用途添加了前缀与具体图片的路径。
所需图片声明完成后,就可以进入下一步。从固件栏中拖出一个QLabel固件,将其自带的文字删除,在styleSheet栏中点击添加按钮,选择“...”按钮》image,选择所需的图片文件,即可将其添加进固件中。再拖动界面中固件的外框,调整其合适的位置、大小。同样应用对QLabel进行styleSheet编辑的方式,可以在界面内作出颜色背景,以避免部分系统默认背景为灰色,导致展示结果与预期相出入的问题。
另外,按钮类固件可以在右边栏的QAbstractButton的icon中添加图标,具体方式同QLabel中添加图片至styleSheet中。
2.3固件的其他特征、格式等
固件的名称,可以在右边栏的对象查看器中进行定义,建议对每个固件定义,默认名称为类名称+编号,容易混淆。
固件的显示层级,可以通过右键进行设置,其原理类似于PPT中的放到最前/放到最后。倘若希望将某一固件默认为隐藏,需要在该界面打开时,在初始化过程中对其使用.hide()函数。
在Qt Designer的右边栏中,还可以对字体的大小、字体类别、对齐方式等属性进行编辑。其中部分属性能否正常工作,取决于所运行的电脑情况,譬如部分字体可能在其他电脑上未安装,因此,应当根据具体情况进行设置。
2.4具体案例
如上图设计出了一个演示用的主界面(欢迎页),红色马赛克覆盖的部分为所在机构Logo,与图中左边的飞机+雷达波束+装甲单位图片皆为独立的QLabel文件。(其中飞机与雷达波束图片来自于网络,装甲单位图片截图自网络游戏WarThunder)
界面采用了无边框格式,因此需要专门设计关闭按钮。
顶部的标题为更改字体颜色为白色、背景颜色为蓝色的QLabel固件。颜色更改同样在styleSheet中进行,其中有添加颜色按钮,具体颜色的rgb值需要设计者自行填入,如果看到电脑内的合适颜色可以用QQ的截图功能进行测量。
右侧两个按钮用于界面跳转,按钮上的图标来自于iconfont-阿里巴巴矢量图标库
信号仅定义三个,分别为关闭界面、两个功能展示界面的跳转。接收者皆为Form,即设计者所定义的整个界面的类名称。传送至Form的close()信号将结束整个界面的进程,下面两个跳转信号则将会把程序跳转至其他界面。
2.5文件编译
保存下的界面设计文件.ui与图片列表文件.qrc并不能被PyQt调用,因此,需要通过PYUIC与PYRCC5插件将其编译为可调用的.py文件。
如上左图,在PyCharm的文件栏中对生成出的.ui文件右键,选择外部工具(External Tools),再选择PYUIC,则会将界面编译为.py文件。对.qrc文件右键,选择外部工具(External Tools),再选择PYRCC5,则会将所用到的图片编译为..._rc.py文件,在刚刚生成的界面.py中,需要将生成的_rc.py文件声明出来。
PyCharm中import图片的.py文件会被标为灰色,即未使用,但是如果不进行声明则会报错。