Flutter：用Expanded/Flexible解决Row文本溢出时spaceBetween失效求助

在Flutter开发中，当使用Expanded或Flexible组件解决Row内文本内容导致的RenderFlex溢出问题时，原本用于分隔左右文本的MainAxisAlignment.spaceBetween效果会丢失。

自定义组件代码 #

class CustomInfoRow extends StatelessWidget {
  final String label;
  final String value;
  final bool hasDivider;

  const CustomInfoRow({
    super.key,
    required this.label,
    required this.value,
    required this.hasDivider,
  });

  @override
  Widget build(BuildContext context) {
    final textStyle =
        Theme.of(context).textTheme.bodyLarge?.copyWith(fontSize: 18.0);

    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Text(
                SharedUtils.translate(context, label),
                style: textStyle,
              ),
            ),
            Expanded(
              child: Text(
                SharedUtils.translate(context, value),
                style: textStyle,
              ),
            ),
          ],
        ),
        if (hasDivider) const Divider(),
      ],
    );
  }
}

效果说明 #

• 使用Flexible组件时：左右文本会根据内容宽度挤压，无法保持左右两端对齐，中间没有明显空白分隔。
• 使用Expanded组件时：左右文本各占Row一半宽度，即使内容很短也会被拉伸，丢失了spaceBetween的两端对齐+中间留白效果。
• 期望效果：左侧文本左对齐，右侧文本右对齐，中间保留空白分隔，同时文本过长时能自动换行不溢出。

解决方案 #

方案1：仅给需要换行的文本套Expanded

如果左侧label内容较短不会溢出，仅给右侧value文本套Expanded，同时设置右对齐：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text(
      SharedUtils.translate(context, label),
      style: textStyle,
    ),
    Expanded(
      child: Text(
        SharedUtils.translate(context, value),
        style: textStyle,
        textAlign: TextAlign.right,
        maxLines: null,
        overflow: TextOverflow.visible,
      ),
    ),
  ],
)

方案2：用Spacer实现分隔+兼容长文本

如果左右文本都可能较长，给每个文本套Flexible，中间加Spacer来保留空白分隔：

Row(
  children: [
    Flexible(
      child: Text(
        SharedUtils.translate(context, label),
        style: textStyle,
        maxLines: null,
        overflow: TextOverflow.visible,
      ),
    ),
    const Spacer(),
    Flexible(
      child: Text(
        SharedUtils.translate(context, value),
        style: textStyle,
        textAlign: TextAlign.right,
        maxLines: null,
        overflow: TextOverflow.visible,
      ),
    ),
  ],
)

方案3：保留spaceBetween并支持文本换行

若要严格保留MainAxisAlignment.spaceBetween，需确保文本允许换行，同时不强制占满宽度：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text(
      SharedUtils.translate(context, label),
      style: textStyle,
      maxLines: null,
      overflow: TextOverflow.visible,
    ),
    Text(
      SharedUtils.translate(context, value),
      style: textStyle,
      textAlign: TextAlign.right,
      maxLines: null,
      overflow: TextOverflow.visible,
    ),
  ],
)

如果仍出现溢出，可给较长的文本单独套Flexible，避免两个文本同时强制占满Row宽度。

内容的提问来源于stack exchange，提问作者Hector Rafael Montilla Campos