杰瑞PY窗体设计器

前言

AI时代，让大模型给我们写一个python窗体，做个小工具，不是很简单了吗？为什么还要窗体设计器，从我的角度出发，大概有以下几点原因：

• 现在绝大多数的AI，如果你让它做Python窗体，它会直接用tkinter的框架给你写，关键是这种框架的窗体很丑，python如此先进的语言，如果最终工具落实还在古老的框架上，那就太呆板了，当然我并不是说tkinter框架不好，大部分情况下，我们用这个框架都能很好地做出自己的第一个小工具，但是如果你要做用于展示，方便大型数据看板，报表的窗体工具，tkinter就显得力不从心了
• 当AI给你画好一个窗体后，如果你用语言给他描述，“把这个按钮往左移动一点点”，“把这个按钮和那个按钮对齐”，这个时候，你会发现很恼火，一些能力不太行的AI往往需要多轮迭代才能理解你的意思

而如果我们可以自己调整窗体布局的话，上面消耗的token就变成了我们自己手动的 微调一次，AI最擅长的是文字工作，而我们人类最喜欢的是视觉呈现，因此可视化的窗体设计器变得十分重要

设计理念

在我的设计中，面向win10以上用户开发，使用的前后端分离的策略，让窗体的设计专注于视觉化呈现，而逻辑则交由后端python代码来实现（这部分AI擅长），在界面不现代化的tkinter和打包过于笨重的QT之间，我进行了折中，让界面既符合现代设计美感，又让打包后的exe文件不至于过大，便于分发，概括来说：

• 前端和后端分离，让擅长前端设计的人负责视觉化呈现，而擅长后端逻辑的AI负责实现功能
• 在前端的美观性和后端的严谨，大型数据能力支持间取得很好的折中，让窗体设计器既符合现代设计美感，又让打包后的exe文件不至于过大，便于分发

在整个设计中，是面向编程小白开发的，所以整体采用中文界面和类VSTO的界面设计，含有导出，预览，界面关系，一键打包等多个 “即点即用” 的功能，让非专业开发也能也能快速上手，实现窗体的设计和打包

界面介绍

主界面非常简洁，主要包含如下区域，接下来会对每个区域的按钮功能进行详细介绍：

一、顶部按钮区

• 文件按钮：这里主要包含了常见的文件管理功能，细分如下
  • 保存工程：保存当前工程，方便后续打开
  • 打开工程：在工程目录里面打开已有的工程，继续上次的设计
  • 更新全部窗体布局：当之前已经导出过一次工程，但是后续又修改了窗体布局，此功能可一次更新
  • 导出UI布局+事件代码：导出当前窗体的布局和预设的事件代码模板，方便后续AI接手修改事件代码
  • 打包为EXE：将当前窗体打包成一个可执行程序，分发给其他用户可以直接运行（会在工程目录下生成一个.buildenv文件夹，创建干净的打包环境）
• 编辑按钮：主要包含撤销，重做，复制粘贴，剪切克隆，删除，全选，锁定（防止误操作）等功能
• 布局按钮：主要包含对齐，分布，修改控件尺寸以及层级的相关功能
• 界面按钮：主要包含界面相关的功能，细分如下
  • 新增界面：新增一个新的界面布局
  • 重命名当前界面：重命名当前界面，方便后续管理
  • 删除当前界面：删除当前界面，释放内存
  • 导出UI布局（当前界面）：将当前界面的UI代码导出，覆盖之前旧的布局代码
  • 导出UI布局+事件代码（当前界面）：将当前界面的布局和事件代码导出，注意这个会把事件代码重置
  • 更新布局：如果AI通过在工作目录修改UI文件更新了布局，此按钮可以将最新的布局代码导入到设计器中
  • 设为主窗体：对于大型系统，一般有主窗体和若干个子窗体，此按钮可以将当前界面设为主窗体
  • 窗体关系图：可以看到不同窗体之间的联系，清晰了解窗体之间的级联架构
• 关于按钮：主要包含快捷键和软件更新的相关辅助功能

二、快捷工具区及控件工具箱

快捷工具区主要放了撤销、重做和常见的快捷对齐和层级调整功能，比较直观易懂，此处不详细展开介绍

目前设计器支持了含文本框在内的十多种控件，如卡片，多页控件，frame，标签，按钮，图表，数据表，日期选择器等，都可以通过拖动的方式拖动到右侧设计器中进行排列

三、界面设计区及属性栏

在界面设计区，可以看到工程中所有的窗体，包括主窗体，子窗体和窗体关系示意图，界面中所有的控件可以拖动复制，可以 delete快捷键 删除，也可以 双击 实现内容的快捷编辑，效果大致如下：

细心的你可能会发现，界面上还有一些小点，这些是网格，方便拖动控件的时候对齐，当然你在拖动控件的时候，也可以看到有对齐线，方便你对齐控件，网格的疏密程度可以通过右上角的 网格 数值调节框调整，同时如果吸附打开，拖动控件的时候，会自动吸附到网格上，方便对齐，如果控件较多，你也可以打开部件导航窗口，在此窗口可以查看和管理所有的控件，如下图所示：

窗体界面设计好之后，可以点击 运行预览 按钮查看窗体的实际运行效果，没问题的话就可以导出窗体的布局和事件代码，方便后续AI接手修改事件代码，导出后的文件结构大致如下：

<应用标题>/
├── main.py                    # 启动入口，每次导出覆盖
├── generated_ui.py            # 运行时框架（读 schema、开窗口、转发事件），每次导出覆盖
├── ui.schema.json             # 总领：app 设置、主窗体、窗体清单
├── windows/
│   ├── page_1.json            # 主窗体完整定义（控件、布局、事件绑定）
│   └── page_2.json            # 其它窗体，文件名 = 窗体 id
├── handlers/
│   ├── __init__.py            # 聚合各窗体 Handlers → AppHandlers，每次导出重写，勿改
│   ├── app.py                 # 全局事件（on_app_start）和共用方法，不覆盖已写代码
│   ├── page_1.py              # 「主窗体」事件处理，不覆盖已写代码
│   └── page_2.py              # 「其它窗体」事件处理，不覆盖已写代码
└── web/
    ├── index.html             # 前端入口，每次导出覆盖
    ├── runtime.js
    ├── runtime.css
    ├── shared/                # 控件渲染层（从设计器复制）
    └── vendor/
        └── echarts.min.js     # 有图表控件时带上

四、AI设计窗体

当然如果你从0开始设计一个系统，可以先让AI生成一个初稿，然后你在这个初稿上再进行修改，只需要调整到AI对话选项卡下，说出我们的需求即可，以下截图是一些测试实例：