Flutter iOS侧滑返回时onWillPop不生效，如何解决？

问题原因：iOS的侧滑返回手势由CupertinoPageRoute内置的手势处理器管控，默认情况下WillPopScope无法拦截该手势触发的返回操作——手势会直接触发路由pop，跳过onWillPop回调。

解决方法一：自定义CupertinoPageRoute #

通过重写路由的手势识别器，将onWillPop逻辑整合到侧滑手势的处理流程中：

1. 定义自定义路由类 #

class CustomCupertinoPageRoute<T> extends CupertinoPageRoute<T> {
  final Future<bool> Function()? onWillPop;

  CustomCupertinoPageRoute({
    required WidgetBuilder builder,
    this.onWillPop,
    RouteSettings? settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  }) : super(
          builder: builder,
          settings: settings,
          maintainState: maintainState,
          fullscreenDialog: fullscreenDialog,
        );

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    return WillPopScope(
      onWillPop: onWillPop,
      child: super.buildPage(context, animation, secondaryAnimation),
    );
  }

  @override
  CupertinoPopGestureRecognizer? createPopGestureRecognizer() {
    return CupertinoPopGestureRecognizer(
      onStartPopGesture: () {
        if (onWillPop != null) {
          // 触发自定义的onWillPop逻辑
          onWillPop!().then((shouldPop) {
            if (shouldPop) {
              navigator?.pop();
            }
          });
          return null; // 阻止默认的手势pop行为
        }
        return super.createPopGestureRecognizer()?.onStartPopGesture();
      },
    );
  }
}

2. 使用自定义路由跳转页面 #

Navigator.push(
  context,
  CustomCupertinoPageRoute(
    builder: (context) => YourTargetPage(),
    onWillPop: () async {
      print('pop');
      Navigator.pop(context, product);
      setState(() {
        product.is_favorite = isFavorite;
      });
      return true;
    },
  ),
);

解决方法二：GestureDetector监听侧滑手势 #

在页面外层添加GestureDetector，手动监听左侧滑手势并触发onWillPop逻辑：

return GestureDetector(
  // 检测从左向右的滑动（iOS侧滑返回方向）
  onHorizontalDragEnd: (details) {
    if (details.primaryVelocity != null && details.primaryVelocity! > 0) {
      _handlePop();
    }
  },
  child: WillPopScope(
    onWillPop: _handlePop,
    child: Scaffold(
      // 你的页面内容
    ),
  ),
);

// 提取重复的pop逻辑
Future<bool> _handlePop() async {
  print('pop');
  Navigator.pop(context, product);
  setState(() {
    product.is_favorite = isFavorite;
  });
  return true;
}

注意事项 #

• 确保你的页面是通过CupertinoPageRoute跳转的，或者在MaterialApp中配置了CupertinoPageTransitionsTheme，否则iOS上不会有侧滑返回手势：

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: const PageTransitionsTheme(
      builders: {
        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
      },
    ),
  ),
  // ...其他配置
);

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