美文网首页Flutter
flutter 再按一次退出 导航返回拦截WillPopScop

flutter 再按一次退出 导航返回拦截WillPopScop

作者: Medicine_8d60 | 来源:发表于2019-04-06 12:00 被阅读0次

导航返回拦截WillPopScope

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

const WillPopScope({
 ...
 @required WillPopCallback onWillPop,
 @required Widget child
})

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

示例

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

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

class WillPopScopeTestRoute extends StatefulWidget {
 @override
 WillPopScopeTestRouteState createState() {
   return new WillPopScopeTestRouteState();
 }
}

class WillPopScopeTestRouteState extends State<WillPopScopeTestRoute> {
 DateTime _lastPressedAt; //上次点击时间

 @override
 Widget build(BuildContext context) {
   return new WillPopScope(
       onWillPop: () async {
         if (_lastPressedAt == null ||
             DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
           Fluttertoast.showToast(
               fontSize: 12.0,
               msg: "再按一次退出程序",
               toastLength: Toast.LENGTH_SHORT,
               timeInSecForIos: 1,
               textColor: Colors.black87,
               gravity: ToastGravity.CENTER,
             );
           //两次点击间隔超过1秒则重新计时
           _lastPressedAt = DateTime.now();
           return false;
         }
         return true;
       },
       child: Container(
         alignment: Alignment.center,
         child: Text("1秒内连续按两次返回键退出"),
       )
   );
 }
}

作者:TYL_CQ
链接:https://www.jianshu.com/p/858ea277675f

相关文章

网友评论

    本文标题:flutter 再按一次退出 导航返回拦截WillPopScop

    本文链接:https://www.haomeiwen.com/subject/kjkriqtx.html