Flutter WillPopScope 双击返回与界面退出提示

淡淡的烟草味﹌ 2023-10-07 16:34 64阅读 0赞

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

*  [Flutter 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢][github]
 *  [系列学习教程在这里][Link 2]

在Android中点击物理返回按钮，或者是全面屏的手势退出，或者是iOS中的左滑退出，在Flutter中可使用WillPopScope 拦截退出事件

本文章的效果

![在这里插入图片描述][20210611211230311.gif_pic_center]

核心代码就是

@override
      Widget build(BuildContext context) {
        
        //返回 或者说退出页面里的提示
        return WillPopScope(
          onWillPop: () async {
        
            //拦截 返回true 表示不拦截
            return false;
          },
          child: Scaffold(..);
      }

##### 实现双击返回提示退出 #####

main() {
        
      runApp(MaterialApp(
        //不显示 debug标签
        debugShowCheckedModeBanner: false,
        //显示的首页面
        home: DemoWillPopScope(),
      ));
    }

///代码清单
    class DemoWillPopScope extends StatefulWidget {
        
      @override
      _DemoWillPopScopeState createState() => _DemoWillPopScopeState();
    }
    
    class _DemoWillPopScopeState extends State<DemoWillPopScope> {
        
    
    
      //上一次点击事件
      int pretime = 0;
    
      @override
      Widget build(BuildContext context) {
        
        //返回 或者说退出页面里的提示
        return WillPopScope(
          onWillPop: () async {
        
            print("返回");
            //当前时间
            int now = DateTime.now().millisecond;
            //计算时间差
            int flag = now - pretime;
            //两次点击时间太长不做处理
            if (flag > 1000) {
        
              print("返回1");
              pretime = now;
              return false;
            }
            print("返回2");
            showTips();
            //拦截
            return false;
          },
          child: Scaffold(
            appBar: AppBar(
              title: Text("拦截返回按钮"),
            ),
            body: Container(
              padding: EdgeInsets.all(30),
              child: Column(
                children: [],
              ),
            ),
          ),
        );
      }
    
      void showTips() async {
        
        bool flag = await showDialog<bool>(
            context: context,
            builder: (BuildContext context) {
        
              return new AlertDialog(
                title: Text("提示"),
                content: Text("您确定要退出吗???"),
                actions: [
                  TextButton(
                      onPressed: () {
        
                        Navigator.of(context).pop(true);
                      },
                      child: Text("确定")),
                  TextButton(
                      onPressed: () {
        
                        Navigator.of(context).pop(false);
                      },
                      child: Text("取消"))
                ],
              );
            });
        if (flag) {
        
          //退出当前页面
        }
      }
    }

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[20210611211230311.gif_pic_center]: https://img-blog.csdnimg.cn/20210611211230311.gif#pic_center