Flutter嵌套Scaffold时实现双击返回退出App的方案咨询

当页面嵌套多个Scaffold时，WillPopScope和第三方库会因嵌套层级的事件拦截失效，以下是两种可行的全局处理方案：

方案一：通过WidgetsBindingObserver全局监听返回事件 #

直接在App根节点的State类中混入WidgetsBindingObserver，接管全局的返回路由事件，绕过嵌套Scaffold的拦截：

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  DateTime? _lastBackPressedTime;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Future<bool> didPopRoute() async {
    // 替换成你的首页路由判断逻辑，确保只在首页触发双击退出
    final isHomePage = ModalRoute.of(context)?.settings.name == '/home';
    
    if (!isHomePage) {
      // 非首页，交给默认返回逻辑（包括嵌套Scaffold的返回）
      return super.didPopRoute();
    }

    // 首页处理双击退出
    final now = DateTime.now();
    if (_lastBackPressedTime == null || 
        now.difference(_lastBackPressedTime!) > const Duration(seconds: 2)) {
      _lastBackPressedTime = now;
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('再按一次退出应用'), duration: Duration(seconds: 2)),
      );
      return true; // 拦截本次返回事件
    } else {
      // 执行退出
      await SystemNavigator.pop();
      return true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/home',
      routes: {
        '/home': (context) => const HomePage(), // 你的首页（嵌套多个Scaffold的页面）
        // 其他路由...
      },
    );
  }
}

方案二：自定义路由观察者监控页面栈 #

通过RouteObserver监听页面栈变化，仅当回到首页时处理双击返回逻辑：

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

class HomeRouteObserver extends RouteObserver<PageRoute> {
  final VoidCallback onHomePageBack;

  HomeRouteObserver(this.onHomePageBack);

  @override
  void didPop(Route route, Route? previousRoute) {
    super.didPop(route, previousRoute);
    // 判断返回后是否回到首页
    if (previousRoute is PageRoute && previousRoute.settings.name == '/home') {
      onHomePageBack();
    }
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DateTime? _lastBackPressedTime;
  late HomeRouteObserver _routeObserver;

  @override
  void initState() {
    super.initState();
    _routeObserver = HomeRouteObserver(_handleHomeBack);
  }

  void _handleHomeBack() {
    final now = DateTime.now();
    if (_lastBackPressedTime == null || 
        now.difference(_lastBackPressedTime!) > const Duration(seconds: 2)) {
      _lastBackPressedTime = now;
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('再按一次退出应用'), duration: Duration(seconds: 2)),
      );
    } else {
      SystemNavigator.pop();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [_routeObserver],
      initialRoute: '/home',
      routes: {
        '/home': (context) => const HomePage(),
        // 其他路由...
      },
    );
  }
}

关键注意事项 #

• 必须准确判断首页路由，避免在其他页面触发退出逻辑
• 测试时需验证嵌套Scaffold的抽屉、底部导航等组件的返回行为是否正常
• SystemNavigator.pop()仅适用于Android，iOS如需退出可使用exit(0)，但需注意苹果审核规范

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