Flutter布局异常：元素未溢出两端对齐、溢出换行逻辑失效

问题原因 #

你当前的判断逻辑完全错误：用constraints.maxWidth <= MediaQuery.of(context).size.width * 0.5来决定使用Wrap还是Row，本质是在判断父组件给的可用宽度是否小于屏幕一半，和内容是否溢出没有任何关系。只要父容器宽度被限制在屏幕一半以内，不管文本多短，都会进入Wrap分支。

正确实现思路 #

要实现「内容未溢出时两端对齐，溢出时自动换行」，核心是比较内容总宽度和父容器可用宽度：

• 如果内容总宽度超过父容器可用宽度，使用Wrap让元素换行
• 如果内容总宽度小于等于父容器可用宽度，使用Row并设置MainAxisAlignment.spaceBetween实现两端对齐

代码实现 #

return LayoutBuilder(
  builder: (context, constraints) {
    // 获取文本样式，可根据实际使用的样式调整
    final textStyle = Theme.of(context).textTheme.bodyLarge!;
    
    // 计算两个文本的宽度
    final text1Width = _getTextWidth("very long text", textStyle);
    final text2Width = _getTextWidth("2", textStyle);
    
    // 预留可选间距，避免文本贴在一起
    final spacing = 8.0;
    final totalContentWidth = text1Width + text2Width + spacing;

    if (totalContentWidth > constraints.maxWidth) {
      return Wrap(
        spacing: spacing,
        children: const [
          Text("very long text"),
          Text("2"),
        ],
      );
    } else {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: const [
          Text("very long text"),
          Text("2"),
        ],
      );
    }
  },
);

// 辅助方法：计算文本的宽度
double _getTextWidth(String text, TextStyle style) {
  final textPainter = TextPainter(
    text: TextSpan(text: text, style: style),
    maxLines: 1,
    textDirection: TextDirection.ltr,
  )..layout(minWidth: 0, maxWidth: double.infinity);
  return textPainter.width;
}

补充说明 #

• 如果你的文本样式不是bodyLarge，记得替换成实际使用的样式（比如titleMedium等）
• 预留的spacing可以根据需求调整，也可以去掉（但建议保留，提升排版美观度）

内容的提问来源于stack exchange，提问作者Joaquín Varela