如何不使用滚动组件修复‘BOTTOM OVERFLOWED XXX’及实现固定屏幕高度适配

核心逻辑 #

你要的是屏幕高度固定、不能滚动，组件跟着屏幕高度按比例缩放的布局，核心就是别用固定像素值，而是基于当前屏幕的实际可用高度来动态分配组件尺寸。

首选方案：用原生 MediaQuery 就够了 #

MediaQuery 是 Flutter 自带的获取设备屏幕信息的工具，完全能搞定你的需求，没必要额外装第三方库，具体步骤如下：

1. 拿到屏幕可用高度
   用 MediaQuery.of(context).size.height 获取屏幕总高度，如果有状态栏、底部导航栏这些系统UI，记得用 MediaQuery.of(context).padding 扣除对应的高度，得到真正能用来放组件的区域高度：

   final screenHeight = MediaQuery.of(context).size.height;
   final statusBarHeight = MediaQuery.of(context).padding.top;
   final bottomBarHeight = MediaQuery.of(context).padding.bottom;
   final availableHeight = screenHeight - statusBarHeight - bottomBarHeight;
   

2. 按比例分配组件高度
   把可用高度按你需要的比例拆分给各个组件，比如你提到的70%-80%这类比例，直接用百分比计算就行：

   return Scaffold(
     body: Column(
       mainAxisSize: MainAxisSize.max, // 让Column填满整个屏幕高度
       children: [
         // 占可用高度的20%
         Container(
           height: availableHeight * 0.2,
           color: Colors.red,
         ),
         // 占可用高度的50%
         Container(
           height: availableHeight * 0.5,
           color: Colors.blue,
         ),
         // 占可用高度的30%
         Container(
           height: availableHeight * 0.3,
           color: Colors.green,
         ),
       ],
     ),
   );
   

   这样不管是iPhone13还是13ProMax，组件都会自动按比例缩放，总高度刚好填满屏幕，不会出现滚动。

3. 处理组件最小/最大高度限制
   如果某些组件不能太小或太大，可以结合 max()/min() 函数来限制：

   // 最小高度100px，同时不超过可用高度的20%
   height: max(availableHeight * 0.2, 100),
   

什么时候需要第三方响应式库？ #

如果你的项目要做更复杂的适配——比如同时适配不同屏幕宽度、多断点布局、跨平台（手机/平板/桌面）适配，可以考虑用 flutter_screenutil 这类库，但就你当前的需求来说，原生MediaQuery已经足够简单高效，没必要多引入依赖。

几个要注意的点 #

• 绝对别用固定像素值写组件高度，所有高度都基于可用高度的百分比计算。
• 用Column的时候一定要设 mainAxisSize: MainAxisSize.max，不然子组件不会填满整个垂直空间。
• 必须扣除系统UI（状态栏、底部栏）的高度，不然组件会被遮挡或者超出屏幕。

内容的提问来源于stack exchange，提问作者SugiuraY