跳到正文
Willh的个人博客 记录 · 思考 · 分享
《Flutter实战·第二版》

7.1 导航返回拦截(WillPopScope)

为了避免用户误触返回按钮而导致 App 退出,在很多 App 中都拦截了用户点击返回键的按钮,然后进行一些防误触判断,比如当用户在某一个时间段内点击两次时,才会认为用户是要退出(而非误触)。Flutter中可以通过WillPopScope来实现返回按钮拦截,我们看看WillPopScope的默认构造函数:

1const WillPopScope({
2  ...
3  required WillPopCallback onWillPop,
4  required Widget child
5})

onWillPop是一个回调函数,当用户点击返回按钮时被调用(包括导航返回按钮及Android物理返回按钮)。该回调需要返回一个Future对象,如果返回的Future最终值为false时,则当前路由不出栈(不会返回);最终值为true时,当前路由出栈退出。我们需要提供这个回调来决定是否退出。

示例

为了防止用户误触返回键退出,我们拦截返回事件。当用户在1秒内点击两次返回按钮时,则退出;如果间隔超过1秒则不退出,并重新记时。代码如下:

1import 'package:flutter/material.dart';
2
3class WillPopScopeTestRoute extends StatefulWidget {
4  
5  WillPopScopeTestRouteState createState() {
6    return WillPopScopeTestRouteState();
7  }
8}
9
10class WillPopScopeTestRouteState extends State<WillPopScopeTestRoute> {
11  DateTime? _lastPressedAt; //上次点击时间
12
13  
14  Widget build(BuildContext context) {
15    return WillPopScope(
16      onWillPop: () async {
17        if (_lastPressedAt == null ||
18            DateTime.now().difference(_lastPressedAt!) > Duration(seconds: 1)) {
19          //两次点击间隔超过1秒则重新计时
20          _lastPressedAt = DateTime.now();
21          return false;
22        }
23        return true;
24      },
25      child: Container(
26        alignment: Alignment.center,
27        child: Text("1秒内连续按两次返回键退出"),
28      ),
29    );
30  }
31}

读者可以运行示例看看效果。