PyQt5实战——多脚本集合包,UI以及工程布局(二)

个人博客:苏三有春的博客

系列往期:
PyQt5实战------多脚本集合包,前言与环境配置(一)

布局

2.1 UI页面布局

整体框架分为分为三个部分,垂直分布。

  • 第一个部分为功能选择按钮(如UTF-8转换,翻译器等)

  • 第二部分为功能区,即对应功能输入,输出展示区

  • 第三部分为后台区,显示对应的后台信息(本质上是将终端输出的print重定向至这块区域,方便调试以及使用)

除此之外,整体的下方状态信息栏中有版本信息

整体布局如下图所示:

tips:

这个界面是直接在vscode中运行时所展示的,因此图标以及部分按钮并未完全列装(不保证debug与打包一致的原因较为复杂,与pyinstaller的版本有关,后续内容会解释),图标列装后如下所示:

2.2 工程布局

在创作自己的程序前(如果是较大的程序),最好需要规划一下自己的工程结构,用多个不同的目录保存不同的资源,如图像,文本,代码等,而代码中,实现不同功能的subprograms(子程序)也可以再细分在不同的目录中,尤其是可以多个subprogram(子程序)反复调用的subprograms(子程序)或scripts(脚本)。

我的工程布局意识也是在这个项目中不断完善的,还有一些不足和错误的地方也在不断更新中。

一级目录

  • MyScriptTools目录是包目录,为了方便管理我们需要用到的各种包文件,需要在项目开始时便创建好该项目python运行的虚拟环境(虚拟环境具体的创建流程看前文)。创建完成后,使用pip包管理器下载的所有包都会保存在这个包目录中。(因为我的虚拟环境名字叫MyScriptTools,因此包目录的名字也叫MyScriptTools)
  • src是存放代码的位置,所有的代码都存放在这个目录下
  • workspaces目录是运行时创建的保存文件目录,因为我的项目中,有一些功能或脚本会产生新的文件,我希望它们被保存在一个统一的空间,看起来不会太过混乱,因此专门设计了这一个功能:在程序运行时,创建一个workspaces目录,以后若产生新的文件,统一保存在workspaces目录下
  • BingTranslator.py与test.py是两个测试脚本,目前已经失去了作用

src目录

  • Classes:该目录下存放着各种功能的功能区UI类,error类等,如TranslatorClass.py为翻译功能的UI设计,包括按钮,文本框的布局等
  • component:该目录下存放着修改组件样式的方法,如editStyle.py文件中存放着修改QLineEdit样式的方法以及修改QTextEdit样式的方法。这样如果有多个QLineEdit组件需要修改样式时,只需要调用其中的方法即可。
  • dist:该目录是使用pyinstaller将程序打包成exe可执行文件时生成的,exe可执行文件存放在其中
  • res:该目录下存放着需要使用的图片,图标等资源文件
  • tools:该目录下存放着脚本以及功能的实现,如:实现翻译的功能方法存放在tools目录下的translation.py文件中,Classes目录下的TranslatorClass.py文件中会调用translation.py文件来实现功能
  • xxx.spec:该文件是如果打包时使用了--onefile参数,即打包生成一个单独的exe文件,则会产生该文件,该文件记录了一些打包时需要关注的信息
  • icon.ico:图标文件,可要可不要,如果不要,在打包时想要生成exe文件的图标时需要指定图标的路径,我懒得指定路径,只想填个名字,就把图标放在与main.py同一目录下
  • main.py:该文件时程序的入口,与C程序的main相同。打包时需要指定程序入口,即该文件
  • PrimeWindow.py:主UI框架,即主窗口,上面Classes中的UI仅为功能区UI,属于主窗口的三部分之一

2.3 布局思想

我的布局思想是在不断碰壁的过程中自己摸索出来的,在开发这个程序之初并没有想把它做成一个完整的具有UI界面的功能集合包,因此一开始并没有工程布局的概念,需要做什么便在src下新建一个文件开始编码,这种习惯的弊端在随着程序愈发庞大而变得愈发清晰,使程序越来越难管理且开发难度增大。之后抽时间将程序整理了一遍,便形成了这种布局。个人观念,仅供参考。

我的工程布局思想主要遵循两个原则:

归类

相同属性或相同功能或本质相同的文件放在一个目录下,如:图片,文本等文件属于输入文件,只可被调用,因此放在同一目录res下,当然,res下可再做区分,img,icon,txt等。不同的功能区UI可放在同一目录下,这样可以将primeWindow与功能UI区分开来,且方便primeWindow调用功能UI,来实现功能的切换。功能的实现放在tools目录下,classes可以调用tools下相应的功能。tools目录下,部分功能过于复杂无法用一个文件完成也可以再建立子目录。

重复调用

如果遇到需要反复调用的功能,可集成出来单独形成一个方法单独存放,方便不同文件的调用,而不需要重复实现,如文本框,单行文本框,按钮等样式,实现选择文件等功能

相关推荐
寒雪谷2 天前
用户登陆UI
开发语言·javascript·ui·harmonyos·鸿蒙
尤老师FPGA2 天前
使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第八讲)
ui
架构文摘JGWZ2 天前
Apache Kafka UI :一款功能丰富且美观的 Kafka 开源管理平台!!
ui·kafka·开源·apache·工具
qq_205279053 天前
UNITY 屏幕UI自适应
ui
好名字08213 天前
vue2改变el-message字体、图标尺寸样式(vue2,element-ui)
开发语言·javascript·ui
UI设计兰亭妙微4 天前
探索 UI 设计服务:提升用户体验的关键力量
ui·ux
GDAL4 天前
掌握 Photoshop 脚本 Folder 对象:批量处理文件的利器
ui·photoshop
ZoeLandia5 天前
Element UI 设置 el-table-column 宽度 width 为百分比无效
前端·ui·element-ui
sunly_5 天前
Flutter:图片在弹窗外部的UI布局
flutter·ui
cjxIt6 天前
element-ui 中的 select 组件如何 remote-method 函数中传参
javascript·vue.js·ui