Flutter出现A RenderFlex overflowed by 230 pixels on the bottom报错如何解决

问题根因 #

你的布局结构存在多处高度计算冲突，最终导致内容超出屏幕高度触发溢出：

• 已通过Expanded分配高度的容器中，硬编码了固定高度值，小屏设备下固定高度会超出分配的可用高度
• 占满剩余高度的Column末尾额外添加了固定高度的占位组件，超出了屏幕可用高度
• Column的尺寸配置和内部Expanded子组件的布局逻辑冲突，导致高度计算异常

修复步骤 #

1. 移除flex占比为8的Expanded内部的SizedBox(height: 600.0)，ListView本身会自适应Expanded分配的高度，不需要额外固定高度
2. 移除外层Expanded包裹的Column末尾的SizedBox(height: 30)，如果需要底部留白，直接给ListView.builder添加padding: EdgeInsets.only(bottom: 30)即可
3. 删除被Expanded包裹的Column的mainAxisSize: MainAxisSize.min配置，Expanded会强制子Column占满分配的所有高度，该配置会和Expanded逻辑冲突
4. （可选优化）上层flex:2的Expanded内只有一个固定高度的卡片，不需要嵌套SingleChildScrollView，可直接删除该滚动组件减少冗余

修复后核心代码示例 #

return Scaffold(
  body: Column(
    children: [
      //To Show Current Date
      Container(
        height: 30,
        margin: EdgeInsets.only(left: 10),
        alignment: Alignment.centerLeft,
      ),
      SizedBox(height: 10),
      //To show Calendar Widget
      Expanded(
        child: Column(
          children: [
            Expanded(
              flex: 2,
              child: Center(
                child: Card(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const ListTile(
                        title: Text(
                          'MISSIONS',
                          style: TextStyle(
                              fontStyle: FontStyle.italic,
                              fontSize: 20),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Expanded(
              flex: 8,
              child: ListView.builder(
                padding: EdgeInsets.only(bottom: 30),
                itemCount: 3,
                itemBuilder: (BuildContext context, int index) {
                  return GestureDetector(
                    child: Card(
                      child: Center(
                        child: Container(
                          height: 110,
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                child: Text('mission'),
                              ),
                              SizedBox(width: 30),
                              Expanded(
                                child: GestureDetector(
                                  child: Padding(
                                    padding: const EdgeInsets.all(20.0),
                                    child: Column(
                                      children: <Widget>[
                                        Container(
                                          child: Stack(
                                            children: <Widget>[
                                              Stack(
                                                children: <Widget>[
                                                  renderBox(),
                                                  renderIcons(),
                                                ],
                                                alignment: Alignment.bottomCenter,
                                              ),
                                              renderBtnLike(),
                                              // 原有动画图标逻辑保持不变
                                            ],
                                          ),
                                          margin: EdgeInsets.only(left: 20.0, right: 20.0),
                                          width: double.infinity,
                                        ),
                                      ],
                                    ),
                                  ),
                                  onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
                                  onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                  );
                }),
            ),
          ],
        )),
    ],
  ),
);

额外提示：你原代码中Row内部写了SizedBox(height: 30)，Row是水平布局，该组件会占水平方向的宽度，改为SizedBox(width: 30)可避免出现横向布局异常。

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