You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter布局报错A RenderFlex overflowed by 81 pixels on the bottom如何解决

错误原因

你触发的A RenderFlex overflowed by 81 pixels on the bottom报错,根源是你给下方盛放文本的Container设置了固定高度260,而内部的标题、上传时间、正文文本的总高度超过了260像素,底部无法容纳超出的内容就触发了Flutter的布局溢出校验。
另外你代码中用来做间距的SizedBox(width: 15)写法不符合需求,你需要的是垂直方向的上下间距,应该设置height: 15才会生效。

解决方案

你可以根据实际产品需求选择以下任意一种方案修复:

  • 方案1:支持内容滚动,适配任意长度的文本
    给固定高度的Container内部套一层SingleChildScrollView,超出容器高度的内容可以上下滑动查看,修改后的代码示例:
Container(
  height: 260,
  child: SingleChildScrollView(
    padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          title,
          style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.w600,
          ),
        ),
        Text(
          "diupload pada : 20 Agustus 2021",
          style: TextStyle(
            fontSize: 10,
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(
          height: 15,
        ),
        Text(
          "testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing",
          style: TextStyle(
            fontSize: 17,
            fontWeight: FontWeight.w600,
          ),
        ),
      ],
    ),
  ),
)
  • 方案2:固定显示行数,超出部分显示省略号
    不需要滚动的场景下,给长文本的Text组件增加行数限制和溢出处理逻辑即可:
Text(
  "长文本内容",
  maxLines: 6, // 可根据实际需求调整最大显示行数
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    fontSize: 17,
    fontWeight: FontWeight.w600,
  ),
)
  • 方案3:取消容器固定高度,高度自适应内容
    删掉Container的height:260配置,改为设置合适的上下padding,让容器高度跟随内容多少自动调整,适合内容长度不会过长的场景。

内容的提问来源于stack exchange,提问作者lukman azhari

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 10:57:03