Flutter中Here Map视图溢出覆盖AppBar顶部如何解决

• 应用未使用Google Map，集成Here Map SDK实现地图功能，将地图组件嵌入Scaffold的body区域时，Here Map视图溢出到AppBar外侧，显示位置超出了body的范围。
• 对应问题复现代码、运行效果如下：

问题复现代码 #

@override
Widget build(BuildContext context) {
  // TODO: implement build
  logger.i('Build Function Executed');
  return Scaffold(
      appBar: AppBar(
        title: Text('My Location'),
      ),
      body: Expanded(
        child: HereMap(
          onMapCreated: _onMapCreated,
        ),
      ));
}

问题根源有两点：

• Expanded组件仅能作为Column、Row、Flex这类弹性布局的直接子组件生效，直接放在Scaffold的body属性下属于无效使用，完全起不到约束子组件尺寸的作用。
• 部分版本的Here Map SDK原生渲染逻辑默认忽略Flutter层传递的父组件约束，会从屏幕最顶部开始绘制，自然会覆盖到AppBar所在区域。

对应修复步骤：

1. 移除body下包裹HereMap的无效Expanded组件，Scaffold的body本身会自动计算占满AppBar下方的全部剩余可用空间，不需要额外用Expanded处理。
2. 给HereMap外层包裹ClipRect组件，强制裁剪所有超出父组件边界的渲染内容，从框架层阻断地图溢出的问题。

修复后的可运行代码如下：

@override
Widget build(BuildContext context) {
  logger.i('Build Function Executed');
  return Scaffold(
    appBar: AppBar(
      title: const Text('My Location'),
    ),
    body: ClipRect(
      child: HereMap(
        onMapCreated: _onMapCreated,
      ),
    ),
  );
}

如果修复后仍存在地图和系统状态栏、导航栏重叠的问题，可在ClipRect外层再套一层SafeArea组件，自动适配系统安全区的边距偏移即可。

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