当前位置：首页 > backend >正文

FlutterUnit 3.3.0 | 全组件、全属性、鸿蒙支持来袭

backend 2025/9/3 6:23:15

theme: cyanosis

FlutterUnit 已上架鸿蒙应用商店，有鸿蒙机器的朋友可以下载体验 ~ FlutterUnit 总算有了自己的一个小窝了

https://appgallery.huawei.com/app/detail?id=com.toly1994.flutter_unit&channelId=SHARE

标题

1. FlutterUnit 3.3.0 功能一栏

FlutterUnit 已经对 Flutter3.35.1 进行了适配，期间主要是一些主题数据名称的变化，更新起来很顺利。

全组件收录

得益于 AI 的能力加持, 目前 FlutterUnit 已经收录了共 553 个可用组件，这是 Flutter3.29.4 版本的所有对外公开使用的组件数。目前 FlutterUnit 已经有了一套完整收录流程：

解析 FlutterSDK 数据 -> 数据 json 化 -> 自动翻译 -> 收录入库 -> FlutterUnit 展示

另外 FlutterUnit 新版本对组件的条目就进行了较大的优化，将组件 Logo 区域的作用发挥到最大，组件详情页的右侧也展示了 Logo 信息。
主页的 Tab 左上角会展示当前家族的组件数量，大家可以更好地看到一共有多少个：

主页	详情页

桌面端也是同样：

全属性收录

组件条目上会展示当前组件一共有多少属性，点击时移动端会跳转到属性详情页，桌面端会弹出属性列表对话框。表情其中的数据支持中英文。

组件全属性	支持英文

这就是本次更新视觉表现上的两个重大突破，大家可以拉取最新代码体验，近两天会打包发布。

2. 聊聊 AI 在这个过程中的作用

首先是 FlutterSDK 解析的能力，一开始我是想让 AI 写个正则，来遍历 FlutterSDK 文件、匹配所有的组件和属性的。没想到它直接基于 analyzer 精准解析 Dart 类。这个过程在《 Flutter 百题斩#15 | 列出 SDK 所有 StatelesWidget 组件》中有所介绍。

通过 Dart 组件类的信息，就可以收集整理我希望得到的数据，然后统一输出发到 WidgetWithFields_3.35.json 中，如下所示：

然后让 AI 写个 Dart 脚本,将这个大 json 打散成之前 FlutterUnit 定义的数据格式。由于 FlutterSDK 只有英文，然后我让 AI 针对所有文件夹逐一执行翻译任务，得到了 desc_zh-CN 的简体中文：

之后是读取零散的 json 数据，将它们入库，这个工作也让 AI 重写了一下。界面如下，它最终会产出 FlutterUnit 需要的 flutter.db：

3. 项目结构上的调整

由于组件的实例和整体项目相对独立，而且数据量很大，一旦写完改动不会太大。我将其单独封装了 unit_widgets_display 库，并且推到的 pub 上，直接给 widget_module 模块使用，这样可以减少 FlutterUnit 项目本身的项目结构压力:

另外 unit_widgets_display 库，任何人都可以提交组件的案例代码，这就将组件示例和 FlutterUnit 解耦 了。目前已经开源到 github, 对于还没有案例的组件，大家也可以在这个仓库里提交组件案例的 Demo 即可。后续同步工具会把你的案例收录到 FlutteUnit, 当然你也可以针对目前已有的案例提出优化的 PR ，给共建提供了可能性。