如何在Flutter的RichText中实现MainAxisAlignment.spaceBetween效果

直接用WidgetSpan嵌套Row就能解决问题，之前用Align导致换行是因为Align会默认撑满可用宽度，超出一行后触发换行。具体实现步骤如下：

1. 用WidgetSpan包裹一个占满父容器宽度的SizedBox，内部放置Row组件
2. 给Row设置mainAxisAlignment: MainAxisAlignment.spaceBetween，让左右文本分别居左、居右
3. 用LayoutBuilder获取父容器的可用宽度，避免硬编码宽度适配不同场景

示例代码：

LayoutBuilder(
  builder: (context, constraints) {
    return RichText(
      text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 14), // 统一基础文本样式
        children: [
          // 可添加其他普通文本内容
          TextSpan(text: "前置文本："),
          WidgetSpan(
            child: SizedBox(
              width: constraints.maxWidth,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("左侧对齐文本"),
                  Text("右侧对齐文本"),
                ],
              ),
            ),
          ),
          // 可继续添加后续文本内容
          TextSpan(text: "\n下一行普通文本"),
        ],
      ),
    );
  },
)

如果RichText处于带padding的容器内，可给SizedBox的宽度减去对应padding值，比如：

width: constraints.maxWidth - 32, // 左右各16的padding

这样就能保证两段文本在同一行实现两端对齐，不会出现换行问题。

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