Flutter实现换行文本末尾添加Widget：仿Reddit帖子标题分类效果

要实现类似Reddit帖子标题旁带分类标签的效果，用Row确实搞不定——因为文本换行后，Row会把标签单独放在右侧，没法跟着最后一行文本走。这里给你两种靠谱的实现方式：

方法一：用RichText + WidgetSpan（最推荐） #

直接把标签作为WidgetSpan插入到文本末尾，不管文本换多少行，标签都会牢牢贴在最后一行的末尾，完全适配需求。示例代码如下：

RichText(
  text: TextSpan(
    style: TextStyle(color: Colors.black87, fontSize: 16),
    children: [
      // 帖子标题文本
      TextSpan(text: "这是一个很长的帖子标题，用来测试换行效果，比如当内容超过一行宽度时，标签会自动跟在最后一行的末尾，而不会单独占一行"),
      // 分类标签Widget
      WidgetSpan(
        alignment: PlaceholderAlignment.middle, // 和文本垂直居中对齐
        child: Container(
          margin: EdgeInsets.only(left: 6),
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          decoration: BoxDecoration(
            color: Colors.blue[100],
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            "科技",
            style: TextStyle(fontSize: 12, color: Colors.blue[700]),
          ),
        ),
      ),
    ],
  ),
)

方法二：用Wrap组件（适合简单场景） #

Wrap会自动把子组件按行排列，当文本换行后，标签会自动跑到最后一行的末尾。注意要给Text设置softWrap: true：

Wrap(
  crossAxisAlignment: WrapCrossAlignment.center,
  children: [
    Text(
      "这是一个很长的帖子标题，用来测试换行效果，比如当内容超过一行宽度时，标签会自动跟在最后一行的末尾，而不会单独占一行",
      style: TextStyle(color: Colors.black87, fontSize: 16),
      softWrap: true,
    ),
    SizedBox(width: 6),
    Container(
      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
      decoration: BoxDecoration(
        color: Colors.blue[100],
        borderRadius: BorderRadius.circular(4),
      ),
      child: Text(
        "科技",
        style: TextStyle(fontSize: 12, color: Colors.blue[700]),
      ),
    ),
  ],
)

两种方法里更推荐RichText，因为它能更精准地控制标签和文本的对齐方式，适配各种复杂的文本样式。

内容的提问来源于stack exchange，提问作者Mohammad Abd-Elmoniem