Flutter中实现无按钮返回：左滑回到上一页的方法

Flutter中实现无需点击按钮、仅通过左滑手势返回上一页的需求，可根据不同场景选择以下方案：

1. 利用原生路由的默认行为（iOS优先） #

iOS平台下，CupertinoPageRoute自带左滑返回手势，只需在跳转时使用该路由即可：

Navigator.push(
  context,
  CupertinoPageRoute(builder: (context) => TargetPage()),
);

这种方式会自带iOS风格的页面过渡动画，且左滑手势完全符合系统交互逻辑。

2. 为Android平台添加左滑返回手势 #

若需要在Android平台也实现该功能，可通过GestureDetector监听水平拖拽动作，触发返回操作：

class SwipeBackEnabledPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 监听水平拖拽更新事件
      onHorizontalDragUpdate: (DragUpdateDetails details) {
        // 当拖拽距离超过阈值（示例设为100）时执行返回
        if (details.delta.dx > 100) {
          Navigator.pop(context);
        }
      },
      child: Scaffold(
        appBar: AppBar(title: Text("支持左滑返回")),
        body: const Center(child: Text("左滑屏幕左侧即可返回上一页")),
      ),
    );
  }
}

若需要过渡动画，可结合PageRouteBuilder自定义路由的滑出动画，模拟iOS的返回效果。

3. 全局配置（基于GoRouter） #

如果项目使用官方推荐的GoRouter导航库，可通过CupertinoPage全局配置左滑返回：

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: "/",
      builder: (context, state) => HomePage(),
      routes: [
        GoRoute(
          path: "target",
          // 使用CupertinoPage启用左滑返回
          pageBuilder: (context, state) => const CupertinoPage(child: TargetPage()),
        ),
      ],
    ),
  ],
);

此方案可让所有使用CupertinoPage的路由在全平台支持左滑返回，且自带标准过渡动画。

4. 禁用特定页面的左滑返回 #

若某页面不需要左滑返回，可通过以下方式禁用：

• 在CupertinoPageRoute中设置fullscreenDialog: true：

Navigator.push(
  context,
  CupertinoPageRoute(
    builder: (context) => NoSwipeBackPage(),
    fullscreenDialog: true,
  ),
);

• 或使用WillPopScope拦截返回事件：

class NoSwipeBackPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false, // 拦截物理返回和左滑返回
      child: Scaffold(
        appBar: AppBar(title: Text("禁用左滑返回")),
        body: const Center(child: Text("无法通过左滑返回上一页")),
      ),
    );
  }
}

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