SuperAPI AI 工具集

flutter-widget-ui

通用与其它

查看项目

更新于 10-15 20:04

技能介绍

用途:这是一套 Flutter 组件 UI 的编写模式,核心是让 UI 保持“笨”——Screen 组件只接收 state 与 onAction,负责渲染和用户交互;业务逻辑、数据转换、网络请求全部放在 ViewModel/UseCase/Data 层,便于测试与设计评审。

主要能力与约定:

  1. 默认使用 StatelessWidget,状态由 ViewModel(ChangeNotifier)持有,ListenableBuilder 负责订阅;仅在需要局部 UI 状态(TextEditingController、ScrollController、TabController、动画控制器)或 initState/dispose 时使用 StatefulWidget。
  2. 尽量使用 const:静态组件、字面量样式、SizedBox(height: N) 等加 const,减少重建。
  3. 订阅模式:Root 组件用 ListenableBuilder 读取 viewModel.state,Screen 不应感知 ListenableBuilder。
  4. 列表用 ListView.builder 而非 Column;需要 Key 时用 Key(item.id.toString());标签切换保留状态用 IndexedStack。
  5. 复用 lib/core/presentation/components/ 下的公共组件(如 BigButton、SearchInputField、RecipeCard 等),颜色与字体使用 ColorStyles、TextStyles 令牌。
  6. 对话框与 SnackBar 在 Root 的交互回调中弹出,ViewModel 只接收 Action。
  7. 无障碍:为有意义的图片/图标加 Semantics(label) 或 IconButton(tooltip),触控目标至少 48×48 逻辑像素,布局用 Padding + mainAxisSize/Expanded 适配字体缩放。
  8. 性能:多用 const,重计算移出 itemBuilder,动画用 AnimatedBuilder 等缩小重建范围,大图用 cacheWidth/cacheHeight 限制解码尺寸。

使用方式:按“新建 Screen 检查表”执行——声明为 StatelessWidget 并只接收 state、onAction;静态子组件全部 const;列表用 ListView.builder;优先复用公共组件;颜色字体用令牌;需要 BuildContext 的效果在 Root 处理。

限制与反模式:不要在 Screen 内调用 getIt、context.push 或 setState 管理应用状态,不要直接使用魔法数字颜色/字体,不要用 Column 手动滚动,不要省略 const。

适用场景:Flutter 应用的界面层开发与代码评审。具体安装命令、依赖版本与平台支持暂未提供。