flutter-responsive-layout

Flutter 响应式布局

根据父级提供的约束进行设计，而不是猜测设备型号。

诊断

在发生问题的视口中复现布局，并启用文本缩放和相关平台界面。读取第一个有意义的约束或溢出错误，并确定是哪个组件施加了不兼容的尺寸。如果没有发生框架异常，请检查受影响组件的几何布局和命中测试行为，而不要仅凭控制台没有报错就认定布局可用。

规则

• 当子树需要响应局部约束时使用 LayoutBuilder；当行为取决于窗口或无障碍属性时使用 MediaQuery。
• 选择少量由内容驱动的断点；不要针对特定设备名称进行分支。
• 优先使用灵活约束、换行、滚动或替代布局，而不是通过固定宽高进行修补。
• 在大屏幕上保持内容宽度易于阅读，不要让所有元素都随之拉伸。
• 空间发生显著变化时，调整导航和信息密度。
• 尊重安全区域、显示特征、键盘内边距、文本缩放，以及指针和触控输入。
• 如果没有证据表明有必要，请避免在热路径上的复杂树中使用 IntrinsicHeight 或重复进行固有尺寸测量。

验证

测试每个断点上下紧邻的宽度、较长的本地化字符串、大号文本、横屏，以及预期的桌面端／Web 窗口尺寸。添加有针对性的组件测试或黄金测试，涵盖可通过视觉断言可靠表示的回归问题。

当组件发生重叠、被裁切或遮挡操作时，请参阅几何布局、视口和测试夹具测试参考。为重要组件定义明确的空间关系，而不要把每个相交的渲染框都视为缺陷。

参考资料

当涉及自适应导航时，请参阅自适应导航模式参考。

来源

• 自适应和响应式设计
• 构建响应式布局