Flutter返回导航时Google Maps组件残留问题求助

问题描述 #

• 基于Flutter 3.10.4开发，从页面A跳转到页面B后返回，Google Maps组件会在屏幕上残留约1秒才消失
• 回退到Flutter 3.3.10版本时无此问题，flutter doctor检测所有环境配置正常
• 问题演示：

排查方向与解决尝试 #

1. 检查Maps控制器的生命周期管理 #

页面A中的Google Maps控制器如果没有正确销毁，可能导致返回时视图残留。可以在页面A的dispose方法中显式销毁控制器：

@override
void dispose() {
  _mapController.dispose();
  super.dispose();
}

另外，也可以在从页面B返回后触发页面A的状态刷新，强制Maps组件重新渲染：

Navigator.push(context, MaterialPageRoute(builder: (_) => PageB())).then((_) {
  setState(() {});
});

2. 排查导航过渡动画的冲突 #

Flutter 3.10.x版本对导航过渡逻辑做了更新，可能和Google Maps的原生视图渲染产生冲突。可以先禁用过渡动画验证：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, _, __) => PageB(),
    transitionDuration: Duration.zero,
  ),
);

如果禁用动画后问题消失，说明是过渡动画导致的，可以自定义更温和的过渡效果，避免和Maps组件的渲染冲突。

3. 验证google_maps_flutter插件兼容性 #

插件版本和Flutter版本不匹配也可能引发这类问题。尝试升级插件到最新稳定版，或者降级到Flutter 3.3.10时兼容的版本：

# pubspec.yaml
dependencies:
  google_maps_flutter: ^2.5.0 # 根据实际兼容情况调整版本号

4. 检查原生平台的渲染配置 #

• Android：确保AndroidManifest.xml中开启硬件加速，原生视图渲染依赖这个配置：

<application android:hardwareAccelerated="true">

• iOS：检查Info.plist中是否有视图层级相关的配置冲突，或者尝试清理Xcode缓存后重新编译。

示例代码 #

// 页面A
class PageA extends StatefulWidget {
  const PageA({super.key});

  @override
  State<PageA> createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  late GoogleMapController _mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("页面A")),
      body: GoogleMap(
        onMapCreated: (controller) => _mapController = controller,
        initialCameraPosition: const CameraPosition(
          target: LatLng(39.9042, 116.4074),
          zoom: 12,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (_) => const PageB()),
        ),
        child: const Icon(Icons.arrow_forward),
      ),
    );
  }

  @override
  void dispose() {
    _mapController.dispose();
    super.dispose();
  }
}

// 页面B
class PageB extends StatelessWidget {
  const PageB({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("页面B")),
      body: const Center(child: Text("点击返回按钮回到页面A")),
    );
  }
}

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