Flutter新手问题：如何在Row中居中组件且另一组件距右侧24单位

你当前用MainAxisAlignment.spaceBetween加左侧24宽度容器的写法，没法保证中间图标真正居中——因为左侧空容器和右侧箭头容器的实际宽度不一定相等，会导致居中偏移。给你两个靠谱的实现方式：

方式一：使用Stack布局（推荐） #

Stack能精准控制每个组件的位置，直接实现中间图标居中、右侧图标固定距右侧24的效果：

Widget build(BuildContext context) {
  return Container(
    color: Theme.of(context).colorScheme.secondaryContainer,
    height: 157,
    width: double.infinity,
    child: Stack(
      children: [
        // 中间居中的设备图标
        Center(child: setDeviceIcon()),
        // 右侧固定距边24的箭头
        Positioned(
          right: 24,
          top: 0,
          bottom: 0,
          child: setArrow(),
        ),
      ],
    ),
  );
}

Container setArrow() {
  return Container(
    color: Colors.yellow,
    child: IconButton(
      onPressed: () {},
      icon: const Icon(Icons.chevron_right),
    ),
  );
}

方式二：用Row结合Expanded+Center #

通过Expanded让中间区域占满剩余空间，再用Center让图标居中，右侧箭头直接控制margin：

Widget build(BuildContext context) {
  return Container(
    color: Theme.of(context).colorScheme.secondaryContainer,
    height: 157,
    width: double.infinity,
    child: Row(
      children: [
        // 左侧空占，让中间区域自动撑满并居中图标
        Expanded(
          child: Center(child: setDeviceIcon()),
        ),
        // 右侧箭头，直接设置右侧margin
        Container(
          color: Colors.yellow,
          margin: const EdgeInsets.only(right: 24),
          child: IconButton(
            onPressed: () {},
            icon: const Icon(Icons.chevron_right),
          ),
        ),
      ],
    ),
  );
}

两种方式都能达成需求：中间图标完全居中，右侧箭头固定距离屏幕右侧24单位。Stack的布局逻辑更直观，适合这种固定位置的场景。

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