Flutter使用SafeArea顶部出白边、调整参数后AppBar高度异常如何解决

• 错误地将SafeArea放在Scaffold外层：Scaffold与CupertinoNavigationBar本身已自带顶部状态栏适配逻辑，外层的SafeArea会额外叠加一层顶部安全边距，因此初始状态下会出现顶部白色空白。
• 长屏设备的衬距计算冲突：当你设置top: false后，SafeArea不再添加顶部边距，但会修改向下传递的MediaQuery数据，长宽比大于18:9的长屏设备的viewPadding计算会被干扰，导致CupertinoNavigationBar拿到错误的顶部衬距值，将自身高度异常撑大。

推荐方案 #

将SafeArea从Scaffold外层移动到Scaffold的body属性内部即可，既可以保留body内容的安全区适配，也不会干扰导航栏的高度计算。修改后的代码如下：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class DashboardActivity extends StatefulWidget {
  @override
  _DashboardActivityState createState() => _DashboardActivityState();
}

class _DashboardActivityState extends State<DashboardActivity> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      resizeToAvoidBottomInset: true,
      appBar: CupertinoNavigationBar(
        backgroundColor: Colors.grey,
        leading: InkWell(
          child: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onTap: () => Navigator.pop(context),
        ),
        middle: Text(
          "Dashboard",
        ),
      ),
      body: SafeArea(
        maintainBottomViewPadding: true,
        child: Text(
          'This is an example use of SafeArea',
        ),
      ),
    );
  }
}

可选方案（仅适用于必须在外层套SafeArea的场景） #

如果业务逻辑要求必须在Scaffold外层全局使用SafeArea，可以手动关闭CupertinoNavigationBar的自动衬距适配：

CupertinoNavigationBar(
  padding: EdgeInsetsDirectional.zero,
  // 其余原有属性保持不变
)

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