SuperAPI AI 工具集

flutter-ui-patterns

前端与建站

查看项目

更新于 10-16 02:14

技能介绍

用途

flutter-ui-patterns 用于构建声明式界面,让组件树清晰反映状态并保持易于测试。它聚焦于 Flutter 组件的实现模式,帮助开发者在构建和重构界面时遵循可维护的实践。

需要区分职责:视觉层次、令牌选择、排版、颜色、表面和美学方向属于 flutter-ui-design;本技能负责用可维护的组件实现这些决策。

主要能力

组合(Composition)

  • 围绕内聚的 UI 概念、复用、独立状态或测试价值来抽取组件,而不是依据任意文件长度。
  • 优先使用不可变的组件配置,并在有效时使用 const 构造函数。
  • 将副作用排除在 build 之外;从生命周期安全的控制器、状态对象或显式回调中触发它们。
  • 使用项目主题和语义化设计令牌,而不是分散的字面量样式。
  • 在 Material 和 Cupertino 行为应当有所区别时,保留平台惯例。
  • 为表单提供明确的校验、焦点、提交和错误行为。
  • 保持 key 稳定且有目的;不要使用随机或变化的 key 来强制重建。

状态边界

在创建控制器、焦点节点和动画控制器的生命周期中持有它们,并在同一位置释放。只有当另一个组件必须协调该状态时,才将其提升。

条件加载参考

  • 在实现校验、焦点遍历、自动填充、异步提交或字段错误行为时,阅读表单与输入相关参考。
  • 在添加或修复 Flutter Widget Previewer 注解和 fixtures 时,阅读组件预览相关参考。

验证

测试有意义的渲染状态和交互。检查文字缩放、受支持场景下的键盘输入、浅色/深色主题,以及至少最小和最大预期尺寸。

使用方式

在需要构建或重构 Flutter 组件、表单、组件预览、组件 API 与 UI 状态时使用本技能。实现校验、焦点、提交等表单行为时结合表单与输入参考;添加或修复 Flutter Widget Previewer 注解与 fixtures 时结合组件预览参考。

适用场景

  • 构建声明式 Flutter 界面,使组件树清晰反映状态。
  • 重构组件,按内聚概念、复用、独立状态或测试价值进行拆分。
  • 实现表单的异步校验、重复提交处理、焦点与错误行为。
  • 管理控制器、焦点节点、动画控制器的生命周期与状态边界。
  • 添加或修复 Flutter Widget Previewer 注解与 fixtures。
  • 验证渲染状态与交互,包括文字缩放、键盘输入、浅色/深色主题及不同尺寸。

参考来源

Flutter UI、Widget catalog、Flutter forms cookbook、Flutter Widget Previewer。

限制

资料未提供该技能的具体收费、价格、平台支持范围或详细使用步骤。视觉层次、令牌选择、排版、颜色、表面与美学方向不属于本技能范围,由 flutter-ui-design 负责。