移动/游戏
用断点与能力策略构建 Flutter 自适应…
在 Flutter 中为手机、平板、桌面、Web、大屏、折叠屏和混合输入设备构建、修复、审查和验证自适应/响应式界面时使用。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 49/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
用断点与能力策略构建 Flutter 自通用
解决思路
- 以可用约束而非平台标签为布局决策依据:用窗口或父级约束决定布局,优先保证触摸可用,再把鼠标、键盘和平台行为作为可测试的显式分支加入。
- 遵循核心规则:约束向下传递,尺寸向上传递,父级决定位置。
- 使用默认断点:Compact 宽度 < 600;Medium 600 <= 宽度 < 840;Expanded 宽度 >= 840。
- 识别用户流程、目标形态、支持平台以及代价高昂的失败模式:溢出、宽内容不可读、状态丢失、键盘流程不可达或平台行为错误。
- 修改布局前先检查现有 widget,找出导航、对话框、列表、网格、固定宽高、方向检查、Platform.* 布局检查以及自定义输入/焦点处理。
- 先抽象共享数据再分支,例如创建一个同时供 NavigationBar 和 NavigationRail 使用的 destination 模型。
- 测量正确的空间:应用级或页面级窗口决策使用 MediaQuery.sizeOf(context);当分支依赖某个 widget 子树的父级约束时使用 LayoutBuilder。
- 按断点或能力分支,而不是按设备类型分支:空间变化用 compact/medium/expanded 布局;应用能做什么或应该做什么用 Capability 和 Policy 对象。
- 实现能保留状态的最小自适应改动:在尺寸变化、方向变化或折叠变化时保持滚动位置、选中的导航目标、表单输入和焦点稳定。
- 至少在 compact 和 expanded 宽度下验证;当实现有独立的平板布局时,也要包含 medium 宽度。
- 按需查阅参考资源:完整自适应设计流程读 adaptive-workflow.md;约束或溢出诊断读 layout-constraints.md;基础布局 widget 指导读 layout-basics.md;常见布局 widget 行为读 layout-common-widgets.md;自适应 UX 护栏读 adaptive-best-practices.md;平台行为分支读 adaptive-capabilities.md;响应式导航起始代码用 responsive_navigation.dart;Capability/Policy 起始代码用 capability_policy_example.dart。
- 不要默认阅读所有参考,只阅读当前失败模式或实现路径所需的路由材料。
- 除非参考中明确说明,否则把 references/ 中的 Dart 片段视为解释性片段;起始代码使用 assets/。
- 不要用 Platform.isIOS、Platform.isAndroid、设备名或 OrientationBuilder 做布局决策,改用可用宽度/约束。
- 不要让大屏上的文本字段、卡片、列表或阅读内容在没有刻意最大宽度或多列布局的情况下拉伸到整个窗口。
- 先做好触摸交互,再把悬停、快捷键、焦点遍历和键盘激活作为加速器加入。
- 对展开布局使用 GridView.extent、自适应 flex 布局或受限内容宽度,当局部重排足够时不要复制整个屏幕。
- 保持 Capability 方法描述什么是可能的,Policy 方法描述应该显示或允许什么;按决策命名方法,而不是按平台命名。
- 把捆绑资源视为起始示例,只有在目标项目或临时 Flutter 项目中 flutter analyze 通过后才可复制使用。
- 修改 Flutter 项目后运行 flutter analyze。
- 当布局分支、导航状态、焦点或 policy/capability 行为发生变化时,运行相关 widget 测试。
- 手动或自动检查窄(<600)、中(600-839,若使用)和宽(>=840)宽度。
- 验证没有新的溢出条纹、文本裁剪、选中状态丢失、滚动位置丢失或键盘遍历损坏。
- 如果无法运行验证,报告阻塞点和风险;没有宽度检查或分析结果时,不要把自适应 UI 改动呈现为已验证。
- 如果目标项目缺少足够上下文来选择最终布局,先实现最小的可逆抽象:共享 destination/数据模型、局部 LayoutBuilder 分支和隔离的 Capability/Policy 接口。
- 只向用户询问无法从应用推断的产品决策,例如每种形态下哪些内容应移动、隐藏或成为主要 content。
适用边界 · 注意事项
- 不要按设备类型或平台标签(如 Platform.isIOS、Platform.isAndroid、设备名、OrientationBuilder)做布局决策。
- 不要默认阅读所有参考文档,只读当前失败模式或实现路径所需的路由材料。
- 不要在目标项目 flutter analyze 通过前直接复制 assets/ 中的起始代码。