Flutter Text组件长文本无法自动换行问题该如何解决？

安全阿岳

2026-9-25

问题核心原因

Flutter 原生 Text 组件默认支持自动换行，出现无法换行的问题基本是父组件没有给 Text 提供有限的宽度约束，导致 Text 判定自身拥有无限横向空间，不会触发换行逻辑。

解决方案

方案1：用 `Expanded` / `Flexible` 包裹 Text（最常用，适配 Row 布局场景）

如果你的 Text 放在 Row 容器内，用 Expanded 包裹后会自动占用 Row 剩余的有限宽度，触发自动换行：

Row(
  children: [
    // 此处可放其他同级组件（如图标、标签等）
    Expanded(
      child: Text(
        item.brand + '\n' + item.model,
        style: const TextStyle(
          fontSize: 18,
          fontFamily: 'Avenir',
          fontWeight: FontWeight.bold
        ),
        softWrap: true, // 显式开启自动换行，默认值为true，写清楚更稳妥
        // 可选配置：限制最大行数、超出截断样式
        // maxLines: 3,
        // overflow: TextOverflow.ellipsis,
      ),
    )
  ]
)

方案2：给 Text 外层增加明确宽度约束

如果 Text 放在无宽度限制的父容器内，可以给外层加固定宽度或者相对屏幕的动态宽度限制：

Container(
  // 示例：宽度为屏幕宽度减去左右共32dp的边距，可根据业务调整
  width: MediaQuery.of(context).size.width - 32,
  child: Text(
    item.brand + '\n' + item.model,
    style: const TextStyle(
      fontSize: 18,
      fontFamily: 'Avenir',
      fontWeight: FontWeight.bold
    ),
  ),
)

优化建议：文本拼接可用 Text.rich 实现（语义更清晰）

两段文本换行拼接的写法可以替换为 Text.rich，逻辑更清晰，不影响自动换行效果：

Text.rich(
  TextSpan(
    children: [
      TextSpan(text: item.brand),
      const TextSpan(text: '\n'),
      TextSpan(text: item.model),
    ],
  ),
  style: const TextStyle(
    fontSize: 18,
    fontFamily: 'Avenir',
    fontWeight: FontWeight.bold
  ),
  softWrap: true,
)