Flutter中AppBar在iOS与Android设备上高度不一致问题求助

问题根源 #

你遇到的核心问题是Flutter在iOS和Android平台上的状态栏高度存在差异，再加上extendBodyBehindAppBar: true让页面内容延伸到AppBar和状态栏下方，直接依赖固定高度或百分比设置ListView内边距自然会适配失效——哪怕用了PreferredSize，也只是控制AppBar自身高度，没算上状态栏的平台差异。

具体解决方案 #

方案1：动态计算总偏移高度（最常用）

直接计算「状态栏高度 + AppBar实际高度」，给ListView设置对应的顶部内边距：

@override
Widget build(BuildContext context) {
  // 获取状态栏高度（iOS/Android适配核心）
  final statusBarHeight = MediaQuery.of(context).padding.top;
  // 获取AppBar自身高度：自定义PreferredSize就用你设置的数值，否则用默认kToolbarHeight
  final appBarSelfHeight = kToolbarHeight; // 自定义场景替换成你的数值，比如60.0
  // 总偏移高度 = 状态栏高度 + AppBar自身高度
  final totalTopPadding = statusBarHeight + appBarSelfHeight;

  return Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      title: const Text('页面标题'),
      // 你的自定义配置，比如设置PreferredSize
      // preferredSize: const Size.fromHeight(60.0),
    ),
    body: ListView(
      padding: EdgeInsets.only(top: totalTopPadding),
      children: [
        // 你的列表内容
      ],
    ),
  );
}

如果用的是Cupertino风格AppBar，记得根据平台切换默认高度：

final appBarSelfHeight = Theme.of(context).platform == TargetPlatform.iOS 
    ? 44.0 
    : kToolbarHeight;

方案2：获取AppBar实际渲染高度（适配复杂自定义AppBar）

如果你的AppBar包含多行标题、底部TabBar等动态内容，固定高度不准确，可以用GlobalKey获取实际渲染高度：

final GlobalKey _appBarKey = GlobalKey();
double _totalTopPadding = 0.0;

@override
void initState() {
  super.initState();
  // 页面渲染完成后获取AppBar实际高度
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final RenderBox? appBarBox = _appBarKey.currentContext?.findRenderObject() as RenderBox?;
    final appBarHeight = appBarBox?.size.height ?? kToolbarHeight;
    setState(() {
      _totalTopPadding = MediaQuery.of(context).padding.top + appBarHeight;
    });
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      key: _appBarKey,
      title: const Text('复杂自定义AppBar'),
      // 示例：添加底部TabBar
      bottom: const TabBar(tabs: [Tab(text: '标签1'), Tab(text: '标签2')]),
    ),
    body: ListView(
      padding: EdgeInsets.only(top: _totalTopPadding),
      children: [
        // 列表内容
      ],
    ),
  );
}

为什么之前的方法无效？ #

• PreferredSize仅控制AppBar自身高度，未包含状态栏的平台差异高度
• 硬写高度/百分比忽略了不同设备的状态栏高度差（比如iOS刘海屏和Android普通屏的状态栏高度差异明显）
• 直接通过context取padding时，可能混淆了MediaQuery.of(context).padding（状态栏/底部栏边距）与其他padding属性，导致数值和实际需求不符

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