Flutter 导航返回拦截（WillPopScope）

封面图 • 2025-10-07 • Flutter

在 Flutter 中，如果你想在用户尝试返回时进行拦截（例如弹出确认对话框），可以使用 `WillPopScope` 组件。这个组件允许你控制用户是否可以“返回”当前页面。

---

## ✅ 什么是 `WillPopScope`？

`WillPopScope` 是一个用于包裹页面的 widget，它可以拦截用户的返回操作（比如点击设备上的返回按钮或在 iOS 上滑动返回）。

---

## 📌 基本用法

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('WillPopScope 示例')),
        body: WillPopScope(
          onWillPop: () async {
            // 在这里处理返回逻辑
            // 返回 true 表示允许返回，false 表示阻止返回
            return await _showExitDialog(context);
          },
          child: Center(child: Text('点击返回按钮试试看！')),
        ),
      ),
    );
  }

Future<bool> _showExitDialog(BuildContext context) {
    return showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('确认退出'),
        content: Text('您确定要退出吗？'),
        actions: [
          TextButton(
            onPressed: Navigator.of(context).pop,
            child: Text('取消'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(true); // 返回 true 允许关闭
            },
            child: Text('确定'),
          ),
        ],
      ),
    ).then((value) => value ?? false);
  }
}
```

---

## 🔍 参数说明

- `onWillPop`: 一个 `Future<bool>` 的回调函数，当用户尝试返回时触发。
  - 返回 `true`：允许返回（关闭当前页面）。
  - 返回 `false`：阻止返回（不关闭当前页面）。

---

## ⚠️ 注意事项

1. **不要在 `onWillPop` 中执行耗时操作**，否则可能导致 UI 卡顿。
2. 如果你在 `onWillPop` 中弹出对话框，必须确保返回的是一个 `Future<bool>`，比如通过 `showDialog` 的返回值。
3. `WillPopScope` 只能拦截当前页面的返回操作，不能拦截嵌套页面（如 `Navigator.push` 后的页面）。

---

## 🧠 高级用法示例

如果你有多个页面需要统一处理返回逻辑，可以考虑将 `WillPopScope` 放在一个 `StatefulWidget` 中，并结合 `Navigator` 来管理返回栈。

---

## ✅ 总结

| 功能 | 说明 |
|------|------|
| `WillPopScope` | 拦截返回操作 |
| `onWillPop` | 返回操作的回调 |
| `true` | 允许返回 |
| `false` | 阻止返回 |

---

如果你有更复杂的场景（比如多层页面、表单未保存提示等），欢迎继续提问！