Flutter布局问题：子Row组件导致父Center组件撑开，MainAxisAlignment.spaceBetween失效

我懂你的需求：既要让"See All ->"固定在Row右侧，又要让Center组件能紧紧包裹住所有内容，不会被撑满整个屏幕。咱们来拆解问题并解决它：

问题根源 #

你当前的代码里，Column默认的crossAxisSize是CrossAxisSize.max，这会让Column直接占满父容器（也就是Center的宽度，而Center的宽度是Scaffold body的全屏宽度）。所以你的Row会被拉满整个屏幕宽度，导致Center无法"包裹"内容；而如果给Row设置mainAxisSize: MainAxisSize.min，Row的宽度会收缩到自身内容宽度，MainAxisAlignment.spaceBetween就没有足够空间实现两端对齐了。

解决方案 #

只需要给你的Column添加crossAxisSize: CrossAxisSize.min，让Column的宽度由内部最宽的子组件决定，而不是撑满全屏。这样整个Column的宽度就是内容的实际宽度，Center可以正常包裹它，同时Row在这个宽度内用MainAxisAlignment.spaceBetween就能完美实现两端对齐：

修改后的完整代码：

Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      crossAxisSize: CrossAxisSize.min, // 新增这一行
      children: <Widget>[
        Text('Choose category'),
        Container(
          child: CategoryCards(),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Recommended'),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Text('See All'),
                Icon(Icons.arrow_forward)
              ]
            )
          ]
        )
      ]
    )
  )
)

原理说明 #

• crossAxisSize: CrossAxisSize.min让Column的水平宽度仅适配内部子组件的最大宽度，而非强制占满父容器
• 此时Row的宽度等于Column的宽度（也就是内容实际宽度），MainAxisAlignment.spaceBetween可以在这个范围内把"Recommended"和"See All ->"分别推到左右两端
• 整个Column的宽度是内容宽度，所以Center可以正常包裹住它，不会被撑开

这样就能达到你想要的效果啦！

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