Flutter Renderflex Overflow问题求助：长文本溢出且Expanded无效

你的布局存在两个核心问题：

• 最外层冗余的Row：这个Row只包裹了一个Column组件，完全没必要，反而会导致内部布局失去正确的宽度约束
• 长文本没有获得可换行的空间：直接放在Row里的Text组件，在空间不足时不会自动换行

修改步骤&优化后的代码 #

return Container(
  padding: EdgeInsets.only(top: 1, bottom: 5),
  width: MediaQuery.of(context).size.width,
  color: Colors.white,
  // 删掉最外层冗余的Row，直接用Column作为Container的child
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start, // 让子组件靠左对齐，还原原布局效果
    children: [
      Row(
        children: [
          // 图标列保持不变
          Column(
            children: [
              Image.asset(
                summary.getIconPath(),
                width: 100,
                errorBuilder: (ctx, error, stackTrace) => Text('Image Error'),
              ),
            ],
          ),
          // 简化时间显示的嵌套层级，去掉多余的Column和Row
          Padding(
            padding: EdgeInsets.only(left: 8), // 加个内边距让时间和图标分开点
            child: Text('${summary.time.toString()} - ${summary.tempMax.toString()}'),
          ),
        ],
      ),
      // 处理长文本的Row：设置mainAxisSize为max占满宽度，用Expanded包裹Text让它能换行
      Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: Text(
              summary.description ?? "",
              softWrap: true, // 允许自动换行
              maxLines: null, // 不限制行数，按需显示
            ),
          ),
        ],
      ),
    ],
  ),
);

关键修改说明 #

1. 移除最外层Row：单个子组件用Row包裹会导致布局约束混乱，直接用Column作为Container的子组件，让整个布局继承Container的宽度约束
2. 简化嵌套层级：时间显示部分原本嵌套了Column+Row，直接用Text加个内边距就能实现同样效果，减少冗余
3. 给长文本分配可换行空间：
   • 给长文本所在的Row设置mainAxisSize: MainAxisSize.max，让Row占满Container的宽度
   • 用Expanded包裹Text，让Text可以在剩余空间内自动换行，彻底解决RenderFlex溢出问题

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