Flutter实现多色文本换行左对齐布局问题求助

要实现标题第一部分红色、后续黑色文本换行后左对齐红色文本下方的效果，别用Row/Wrap拆分组件，直接用RichText（或Flutter 3.3+支持的Text.rich）把不同颜色的文本合并成一个整体文本块即可，这样换行时会自动左对齐到整个标题的左边缘，正好匹配你的需求。

示例代码 #

用RichText实现：

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: [
      TextSpan(
        text: "红色标题前缀 ",
        style: TextStyle(color: Colors.red, fontSize: 18),
      ),
      TextSpan(
        text: "这里是后续的黑色文本内容，当内容长度超过一行时，会自动换行，并且换行后的文本会左对齐在红色文本的下方，完全符合你想要的Libération应用标题布局效果。",
        style: TextStyle(color: Colors.black, fontSize: 18),
      ),
    ],
  ),
)

用Text.rich实现（更简洁）：

Text.rich(
  TextSpan(
    children: [
      TextSpan(
        text: "红色标题前缀 ",
        style: TextStyle(color: Colors.red, fontSize: 18),
      ),
      TextSpan(
        text: "这里是后续的黑色文本内容，当内容长度超过一行时，会自动换行，并且换行后的文本会左对齐在红色文本的下方，完全符合你想要的Libération应用标题布局效果。",
        style: TextStyle(color: Colors.black, fontSize: 18),
      ),
    ],
  ),
)

原理说明 #

把不同颜色的文本合并为一个连续文本流后，换行时会遵循统一的左对齐规则，不会出现拆分组件后换行错位、文本溢出的问题，完美适配你要复刻的报纸应用标题样式。

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