用途
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 负责。