Flutter左图右文布局Text换行失效出现溢出如何解决

核心原因 #

Flexible/Expanded 实现文本自动换行的前提是：组件必须是 Row/Column 等Flex布局的直接子节点，才能正确拿到Flex组件传递的剩余空间约束。如果中间嵌套了其他无宽度约束的容器组件，约束链断裂，哪怕给Text套多层Flexible也不会生效，这是90%的人遇到该问题的根因。

可行实现方案 #

方案1：标准约束层级实现（推荐） #

左图右文结构直接用Row布局，将右侧文本区的Expanded作为Row的直接子节点承接横向剩余宽度，文本拿到明确的宽度边界后会自动换行，示例代码如下：

Widget buildInfoCard() {
  return Container(
    margin: const EdgeInsets.all(12),
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.white,
    ),
    child: Row(
      // 文本较长时用顶部对齐，视觉效果更统一
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 左侧固定尺寸图片
        ClipRRect(
          borderRadius: BorderRadius.circular(6),
          child: Image.asset(
            '你的本地/网络图片资源路径',
            width: 100,
            height: 100,
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(width: 12),
        // 重点：Expanded必须是Row的直接子组件，不要在这层和Row之间加其他容器
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                '组件标题',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
              ),
              const SizedBox(height: 6),
              Text(
                '长介绍文本内容：当文本长度超过Expanded分配的横向可用宽度时，会自动按照软换行规则折行显示，不会出现横向溢出的报错。如果是连续无空格的长字符串（比如长链接、连续数字），可以额外给Text设置softWrap: true强制按字符折行。',
                style: TextStyle(fontSize: 14, color: Colors.grey[700]),
                // 可选配置：限制最大行数，超出部分显示省略号
                maxLines: 5,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        )
      ],
    ),
  );
}

方案2：复杂层级下的显式约束实现 #

如果你的组件嵌套层级深，不方便调整Flexible的位置，可以用LayoutBuilder拿到当前上下文的可用宽度，显式给文本容器设置宽度，不需要依赖Flex布局的约束传递：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const LeftFixedImage(),
    LayoutBuilder(
      builder: (context, constraints) {
        // 拿到Row分配给右侧区域的最大可用宽度
        final availableWidth = constraints.maxWidth;
        return Padding(
          padding: const EdgeInsets.only(left: 12),
          // 显式给文本容器指定宽度，Text拿到明确宽度边界就会自动换行
          child: SizedBox(
            width: availableWidth,
            child: const Text('你的长介绍文本内容'),
          ),
        );
      },
    )
  ],
)

常见踩坑点 #

• 不要在Expanded/Flexible和父级Flex组件之间嵌套Container、Padding、Align等组件，会直接打断约束传递，导致换行失效
• 多层Row嵌套时，每一层的横向剩余空间分配都需要用Expanded承接，不要在内层Row里直接放无约束的Text
• 不要给文本的父级容器设置double.infinity宽度或固定宽度，会覆盖Flex布局的自适应约束

内容的提问来源于stack exchange，提问作者H. Kazu