Flutter AppBar中BackButton的准确位置？kToolbarHeight是否有4px偏移？

偏差原因 #

你遇到的4px偏移不是kToolbarHeight本身的数值错误，而是AppBar内部组件的默认布局规则导致的：

1. Material 2规范下kToolbarHeight默认值为56dp，而AppBar内的默认返回按钮本质是IconButton，它的默认点击区域高度为48dp，在AppBar中会自动垂直居中，因此按钮顶部距离AppBar顶部的偏移值为(56-48)/2 = 4dp，这就是你需要减4px的原因。
2. 另外你代码中写的左侧偏移left:4.0也不符合默认规范，AppBar的leading区域默认左侧边距为16dp，硬写4dp会导致水平方向也出现偏移。

正确实现方案 #

方案1：手动定位（适配多场景） #

不要硬写魔法值kToolbarHeight -4，通过系统参数计算准确偏移，避免Material2/3、主题配置变更导致的适配问题：

Positioned(
  // 计算垂直偏移：如果开启了extendBodyBehindAppBar，需要加上状态栏高度
  top: MediaQuery.of(context).padding.top + (kToolbarHeight - 48)/2,
  // 水平偏移用系统主题配置，适配自定义主题的leading边距
  left: Theme.of(context).appBarTheme.leadingPadding?.resolve(Directionality.of(context))?.left ?? 16.0,
  child: CustomBackButton(),
)

如果你的Stack在Scaffold的body区域且未开启extendBodyBehindAppBar，body的布局起点在AppBar下方，垂直偏移改为负值即可：

top: - (kToolbarHeight - (kToolbarHeight - 48)/2)

方案2：无偏移实现（更稳妥） #

不需要手动计算坐标，直接将自定义返回按钮放到AppBar的leading属性中，通过动画控制AppBar的透明度和底部表单的位移联动，天然和默认返回按钮位置完全对齐：

Scaffold(
  // 关联动画控制器的value控制透明度
  appBar: AppBar(
    opacity: animationController.value,
    leading: CustomBackButton(),
    // 其余AppBar配置
  ),
  body: // 你的底部表单和地图组件
)

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