Flutter中添加Button B后，如何固定Button A在Row组件中心？

当前代码中Row的mainAxisAlignment: MainAxisAlignment.center是让Button A + 间隔 + Button B这个整体居中，导致Button A被挤偏。要让Button A始终单独处于屏幕中心，可参考以下方法：

方法一：IntrinsicWidth + Row（最简方案） #

利用IntrinsicWidth让Row的宽度刚好容纳所有子元素，再通过Center把Row置于屏幕中心，同时让Row内部的Button A保持在Row的中心（即屏幕中心），Button B自然处于A的右侧。

Center(
  child: IntrinsicWidth(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OutlinedButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.translate),
          label: const Text("Button A"),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.resolveWith(getColor),
            foregroundColor: MaterialStateProperty.resolveWith(getColor2),
          ),
        ),
        const SizedBox(width: 10),
        OutlinedButton(
          onPressed: () {},
          child: const Text("Button B"),
        ),
      ],
    ),
  ),
)

原理：IntrinsicWidth限制Row的宽度等于子元素总宽度，Center将这个窄Row放在屏幕正中间，而Row内部的mainAxisAlignment: MainAxisAlignment.center让Button A处于Row的中心——也就是屏幕的中心，Button B则紧跟在A的右侧，完全不影响A的居中位置。

方法二：Stack布局（灵活定位） #

如果需要更灵活地控制Button B的位置（比如调整与A的间距），可以用Stack让Button A固定居中，Button B直接定位在A的右侧。

Center(
  child: Stack(
    alignment: Alignment.center,
    children: [
      // Button A 始终处于屏幕中心
      OutlinedButton.icon(
        onPressed: () {},
        icon: const Icon(Icons.translate),
        label: const Text("Button A"),
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith(getColor),
          foregroundColor: MaterialStateProperty.resolveWith(getColor2),
        ),
      ),
      // Button B 定位在A的右侧，可自定义偏移量
      Positioned(
        // 偏移量 = A的半宽 + 间隔，可根据实际按钮宽度微调
        left: MediaQuery.of(context).size.width / 2 + 55,
        child: OutlinedButton(
          onPressed: () {},
          child: const Text("Button B"),
        ),
      ),
    ],
  ),
)

如果不想手动计算偏移量，可通过GlobalKey动态获取Button A的实际宽度：

1. 定义GlobalKey：

final GlobalKey _buttonAKey = GlobalKey();

2. 修改Stack代码：

Center(
  child: Stack(
    alignment: Alignment.center,
    children: [
      OutlinedButton.icon(
        key: _buttonAKey,
        onPressed: () {},
        icon: const Icon(Icons.translate),
        label: const Text("Button A"),
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith(getColor),
          foregroundColor: MaterialStateProperty.resolveWith(getColor2),
        ),
      ),
      Positioned(
        left: () {
          final renderBox = _buttonAKey.currentContext?.findRenderObject() as RenderBox?;
          final buttonWidth = renderBox?.size.width ?? 0;
          // 屏幕中心 + A的半宽 + 间隔宽度
          return MediaQuery.of(context).size.width / 2 + buttonWidth / 2 + 10;
        }(),
        child: OutlinedButton(
          onPressed: () {},
          child: const Text("Button B"),
        ),
      ),
    ],
  ),
)

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