用 LayoutBuilder 和约束让 Flutter…

当 Flutter 应用需要在手机、平板、桌面等不同窗口尺寸下都保持良好布局时，用 LayoutBuilder、MediaQuery 和 Expanded/Flexible 实现自适应。

适用场景

解决思路

1. 用 MediaQuery.sizeOf(context) 获取整个应用窗口的尺寸。
2. 用 LayoutBuilder 根据父组件分配的空间做布局决策，通过 constraints.maxWidth 决定返回哪套组件树。
3. 不要在组件树顶部附近用 MediaQuery.orientationOf 或 OrientationBuilder 来切换布局，设备方向不能准确反映可用应用窗口空间。
4. 不要检测硬件类型（如“手机”还是“平板”），Flutter 应用运行在可调整窗口、多窗口模式和画中画中，所有布局决策都应严格基于可用窗口空间。
5. 在 Row、Column 或 Flex 中用 Expanded 和 Flexible 分配空间：Expanded 强制子组件填满剩余空间（等价于 Flexible 且 fit: FlexFit.tight、flex 为 1.0）；Flexible 允许子组件在指定上限内自行调整大小，用 flex 因子定义兄弟组件间的空间分配比例。
6. 防止组件在大屏上占满全部水平空间：把 GridView 或 ListView 等组件包在 ConstrainedBox 或 Container 中，并在 BoxConstraints 里定义 maxWidth。
7. 渲染数量未知或很大的列表时，始终使用 ListView.builder 或 GridView.builder 做懒加载。
8. 不要锁定屏幕方向，锁定方向会在折叠屏设备上导致严重布局问题（常出现黑边letterboxing），Android 大屏等级要求同时支持竖屏和横屏。
9. 如果业务需求强制锁定方向，改用 Display API 获取物理屏幕尺寸，而不是 MediaQuery，因为兼容模式下 MediaQuery 拿不到更大的窗口尺寸。
10. 支持多种输入方式：实现基础鼠标、触控板和键盘快捷键支持，确保触摸目标尺寸合适且键盘导航可访问。
11. 构建自适应布局的工作流：确定需要自适应行为的组件；把组件树包进 LayoutBuilder；从 builder 回调中取出 constraints.maxWidth；定义自适应断点（如 largeScreenMinWidth = 600）；若 maxWidth > largeScreenMinWidth 则返回大屏布局（如用 Row 把导航侧栏和内容区并排）；若 maxWidth <= largeScreenMinWidth 则返回小屏布局（如 Column 或标准导航方式）；运行验证器 -> 调整应用窗口大小 -> 检查布局切换 -> 修复溢出错误。
12. 优化大屏的工作流：找出全宽组件（如 ListView、文本块、表单）；若优化列表，把 ListView.builder 改为 GridView.builder 并使用 SliverGridDelegateWithMaxCrossAxisExtent 根据窗口尺寸自动调整列数；若优化表单或文本块，把组件包进 ConstrainedBox；对 ConstrainedBox 应用 BoxConstraints(maxWidth: [optimal_width])；把 ConstrainedBox 包进 Center 组件，让受限内容在大屏上居中；运行验证器 -> 在桌面/平板目标上测试 -> 检查水平拉伸 -> 调整 maxWidth 或网格范围。