Flutter中如何实现多Text组件同行折行且充分利用空间？

你需要实现一段连续文本，其中部分内容可设置不同颜色，同时文本能在合适位置自动断行、避免溢出，但用Wrap包裹多个Text组件时，每个Text会作为整体换行，长文本直接跳到新行，没法利用当前行剩余空间，又不想把每个单词拆成单独的Text组件。

问题原因 #

Wrap的子元素是独立布局单元，每个Text都会被当作不可拆分的块处理——当某个Text宽度超过Wrap剩余空间时，会整体换行，不会在Text内部进行文本断行。

解决方案 #

使用Flutter的Text.rich（或RichText）组件，通过TextSpan组合不同样式的文本片段。这样整个内容是连续的文本流，会自动在合适位置断行，同时能给指定片段设置不同样式，无需拆分单个单词。

代码示例 #

Text.rich(
  TextSpan(
    // 设置默认文本样式，子TextSpan会继承该样式
    style: TextStyle(
      color: WorkoutTheme.textPrimaryWhite,
      fontSize: WorkoutTheme.h1Size,
      fontWeight: FontWeight.w600,
      height: 1,
    ),
    children: [
      TextSpan(text: "This is the first part "),
      // 重写特定样式（比如颜色）
      TextSpan(
        text: "this is second",
        style: TextStyle(color: Colors.red),
      ),
      TextSpan(text: " this wraps to a new line"),
    ],
  ),
)

说明 #

• 外层TextSpan定义默认样式，需要修改样式的片段只需重写对应属性（如颜色、字体粗细等）即可。
• 整个文本会像普通Text组件一样自动换行，充分利用行空间，不会出现单个Text组件整体换行的问题。
• 如果需要在文本中混入其他Widget（如图标），可以使用WidgetSpan扩展，但纯文本场景下TextSpan完全满足需求。

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