如何在Flutter中按需求自定义对齐Row组件内的两个按钮？

核心问题是你的Row没有占据足够的横向空间，导致mainAxisAlignment设置无法生效——父级Column的mainAxisAlignment只会影响纵向布局，真正限制Row宽度的是它自身的尺寸约束。

给你两个直接可行的方案：

方案1：用Expanded让Row撑满横向宽度 #

给Row外层套一个Expanded，让它占满Column的可用横向空间，再用MainAxisAlignment.spaceBetween让两个按钮分别左右对齐：

Column(
  // 不管你原来的mainAxisAlignment是什么，不影响这个方案
  children: [
    // 你的其他组件...
    Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // 红色按钮
          ElevatedButton(
            style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
            onPressed: () {},
            child: const Text("红色按钮"),
          ),
          // 图库按钮
          ElevatedButton(
            onPressed: () {},
            child: const Text("图库按钮"),
          ),
        ],
      ),
    ),
    // 你的其他组件...
  ],
)

方案2：直接指定Row宽度为屏幕宽度 #

如果不想用Expanded，也可以通过MediaQuery获取屏幕宽度，直接设置给Row：

Row(
  width: MediaQuery.of(context).size.width,
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    // 两个按钮组件
  ],
)

注意：如果页面有左右padding，记得用MediaQuery.of(context).size.width - 2 * paddingValue来修正宽度，避免按钮超出屏幕。

为什么之前的alignment没生效？因为默认情况下Row的宽度是子组件的总宽度，此时设置mainAxisAlignment不会有左右分散的效果——只有当Row的宽度大于子组件总宽度时，这个属性才会起作用。

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