如何让Flutter中的Row在父组件内同时居中并收缩至所需宽度？

要让Row收缩至实际内容宽度，同时保持内容居中，核心是修改Row的mainAxisSize参数，再根据需求调整Card的布局：

方式一：让Card和Row都收缩至内容宽度并整体居中 #

Align(
  alignment: Alignment.center,
  child: Card(
    child: Row(
      mainAxisSize: MainAxisSize.min, // 关键：限制Row宽度为内容所需
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Col 1"),
        SizedBox(width: 10),
        Text("Col 2"),
      ],
    ),
  ),
)

方式二：Row收缩至内容宽度并在全屏Card内居中 #

如果需要Card保持全屏宽度，仅让Row收缩并在Card内居中：

Card(
  child: Center(
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text("Col 1"),
        SizedBox(width: 10),
        Text("Col 2"),
      ],
    ),
  ),
)

原理说明 #

• Row默认的mainAxisSize: MainAxisSize.max会强制它占满父容器的全部水平空间，设置为MainAxisSize.min后，Row的宽度会仅包裹内部子组件的总宽度。
• Card默认会扩展以填充父容器的可用空间，因此用Align或Center包裹Card时，Card会收缩至子组件（Row）的宽度；若仅需Row在Card内居中，直接用Center包裹Row即可。

内容的提问来源于stack exchange，提问作者Stéphane de Luca