Flutter點擊兩次返回鍵退出APP

在APP中一些頁面為了防止用戶操作失誤點擊到返回鍵導致退出APP，可以設置其一定時間內點擊兩次返回鍵才允許退出APP，完成這個功能可以通過WillPopScope和SystemNavigator.pop實現

我們先來看一下效果：

 

 

要實現這個效果我們需要先在外層包裹WillPopScope用來監聽用戶點擊返回鍵

 

Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        body: Center(
          child: Text('點擊兩次返回退出APP'),
        ),
      ),
      onWillPop: (){
        // 點擊返回鍵的操作
      },
    );
  }

　　

包裹好WillPopScope之后你會發現你再點擊返回鍵就沒效果了

然后我們需要先做好一個時間的判斷，比如兩次點擊在兩秒之內（可以通過difference對比兩個時間的時間差）即可進行退出操作

DateTime lastPopTime;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        body: Center(
          child: Text('點擊兩次返回退出APP'),
        ),
      ),
      onWillPop: (){
        // 點擊返回鍵的操作
        if(lastPopTime == null || DateTime.now().difference(lastPopTime) > Duration(seconds: 2)){
          lastPopTime = DateTime.now();
          Toast.toast(context,msg: '再按一次退出');
        }else{
          lastPopTime = DateTime.now();
          // 退出app
        }
      },
    );
  }

　　

最后我們再通過執行SystemNavigator.pop完成退出，需引用

import 'package:flutter/services.dart';

　　

最終代碼

DateTime lastPopTime;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        appBar: AppBar(
          title: Text('點擊兩次返回退出APP',style: TextStyle(color: Colors.white,fontSize: 20),),
        ),
        body: Center(
          child: Text('點擊兩次返回退出APP'),
        ),
      ),
      onWillPop: () async{
        // 點擊返回鍵的操作
        if(lastPopTime == null || DateTime.now().difference(lastPopTime) > Duration(seconds: 2)){
          lastPopTime = DateTime.now();
          Toast.toast(context,msg: '再按一次退出');
        }else{
          lastPopTime = DateTime.now();
          // 退出app
          await SystemChannels.platform.invokeMethod('SystemNavigator.pop');
        }
      },
    );
  }

　　

到這就可以實現啦~

Toast.toast();這個提示框是自己封裝的一個小組件，需要用到的可以看https://www.cnblogs.com/gxsyj/p/11018117.html