背景

Android手机会有虚拟按键, 或者实体按键。 用户点击返回按键或误触时 如果刚打开或者路由栈没有更多页面则会退出应用
直接退出应用的话 用户体验就太差了, 所以大多数的做法是在一定时间内再按返回才进行退出操作

解决

在Flutter中我们可以通过 WillPopScope 来实现返回按钮拦截

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

onWillPop是回调函数, 当用户点击返回按钮时调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class WillPopTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => WillPopTestState();
}

class WillPopTestState extends State<WillPopTest> {
  DateTime? _lastClickTime; //上次点击时间

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GetMaterialApp(
      home: Scaffold(
        body: WillPopScope(
            onWillPop: () async {
              if (_lastClickTime == null ||
                  DateTime.now().difference(_lastClickTime!) >
                      Duration(seconds: 1)) {
                _lastClickTime = DateTime.now();
                Get.snackbar('提示', '再按一次退出',
                    margin: EdgeInsets.only(bottom: 10),
                    snackPosition: SnackPosition.BOTTOM);
                return false;
              }
              return true;
            },
            child: Container(
              child: Center(
                child: Text('点击两次返回退出app'),
              ),
            )),
      ),
    );
  }
}

1