Flutter自定义对话框返回相关问题汇总

简介: Flutter自定义对话框返回相关问题汇总

使用WillPopScope即可,重点onWillPop方法:

Future<bool> _onWillPop()=>new Future.value(false);

由于要弹出dialog,我这里是禁掉返回按钮,当然也可以在这里做一下其他操作,比如连续点击两次返回,又或者连续pop两次把dialog和页面一起返回掉。

import 'package:flutter/material.dart';
 
 
class RewriteShowDialog {
  
  RewriteShowDialog({
    @required this.context,
    this.child,
    this.barrierColor = Colors.black54,
    this.barrierDismissible = false,
    this.elevation = 0,
    this.padding
  }){
    _showGeneralDialog(
      barrierDismissible: barrierDismissible,
      barrierColor: barrierColor,
      builder: (BuildContext context) {
        /// AnimatedPadding代替dialog 
        /// dialog没有提供修改padding的属性,本身也是调用的AnimatedPadding
        Future<bool> _onWillPop()=>new Future.value(false);
        return WillPopScope(
          onWillPop:_onWillPop,
          child: AnimatedPadding(
            padding: padding == null ? EdgeInsets.symmetric(horizontal: 32, vertical: 24) : padding,
            duration: Duration(milliseconds: 100),
            curve: Curves.decelerate,
            child: MediaQuery.removeViewInsets(
              removeLeft: true,
              removeTop: true,
              removeRight: true,
              removeBottom: true,
              context: context,
              child: Center(
                child: Material(
                  elevation: elevation,
                  borderRadius: BorderRadius.circular(12),
                  child: child
                ),
              ),
            ),
          ),
        );
      }
    );
  }
  final BuildContext context;
  /// 内容
  final Widget child;
 
  /// 点击背景是否可以关闭弹窗
  final bool barrierDismissible;
  
  /// 背景颜色
  final Color barrierColor;
 
  /// 阴影
  final double elevation;
 
  /// 内边距
  final EdgeInsets padding;
 
  /// 重写showGeneralDialog
  /// 系统自带的背景背景透明不能修改
  void _showGeneralDialog({
    Widget Function(BuildContext) builder,
    Widget child,
    bool barrierDismissible,
    Color barrierColor
  }) {
    showGeneralDialog(
      context: context,
      pageBuilder: (BuildContext buildContext, Animation<double> animation, Animation<double> secondaryAnimation) {
        final Widget pageChild = child ?? Builder(builder: builder);
        return SafeArea(
          child: Builder(
            builder: (BuildContext context) {
              return pageChild;
            }
          ),
        );
      },
      barrierDismissible: barrierDismissible,
      barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
      barrierColor: barrierColor,
      transitionDuration: const Duration(milliseconds: 150),
      transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(
          opacity: CurvedAnimation(
            parent: animation,
            curve: Curves.easeOut,
          ),
          child: child,
        );
      },
    );
  }
}

Flutter 关闭弹框并finish掉当前页面

场景描述:

在一个用户登录退出的场景模式下,并关闭掉当前页面,场景可能类似如下:

如图,当我们点击确定退出按钮,去请求接口,请求成功后,关闭当前dialog,然后再退出当前页面。

上部分代码:

setting_page.dart

// 弹框
  void showLoginOutDialog() {
    showDialog(
        context: context,
        barrierDismissible: false,   // 点击外部不消失
        builder: (BuildContext context){
          return CommonDialog(
            title: "确定退出当前账号?",
            onNavClickListener: (){
              print("onNavClickListener  ");
              Navigator.of(context).pop(1);
            },
            onPosClickListener: (){
              print("loginaa  ");
              Navigator.of(context).pop(1);
              _loginOut();
            },
          );
        }
    );
  }
 
// 退出网络请求,这里的pop("login_out")为标志,进行退出后页面的刷新操作。
  void _loginOut() async{
    DataUtils.loginOut().then((res){
      print("res $res");
      if (res) {
        ToastUtil.showBottomToast("退出成功");
        Navigator.of(context).pop("login_out");
      }else {
        ToastUtil.showBottomToast("退出失败");
      }
    }).catchError((onError){
      print("onError $onError");
    });
  }

页面弹出/返回时 return Future.value(false) 的作用

当我们在 flutter 应用中,跳转到其他 app 或者返回桌面时会这么调用

同样的我们退出当前页面时,调用 Navigator.pop(context) 后同样也会调用 return Future.value(false) 这是为什么呢?

原因

首先我们要知道不调用会怎么样?

不调用会怎么样

  • 如果我们在调用 Navigator.pop(context, false) 之后
  • 使用的是 return Future.value(true);
  • 那么按下后退按钮后,应用程序将显示黑屏,logcat中没有错误。

为什么使用

  • 当我们使用 Navigator.pop(context),Future.value(true); 手动导航,会触发另一个无法完成的弹出窗口
  • 这是由于当前已经存在页面,所以这会使应用程序崩溃。
  • 这时由于 OnWillPop 需要返回,因此通过使用 return Future.value(false);告诉 OnWillPop 我们在此处处理页面的关闭
相关文章
|
16天前
|
前端开发 搜索推荐
Flutter中自定义气泡框效果的实现
Flutter中自定义气泡框效果的实现
25 3
|
1月前
|
前端开发
Flutter快速实现自定义折线图,支持数据改变过渡动画
Flutter快速实现自定义折线图,支持数据改变过渡动画
42 4
Flutter快速实现自定义折线图,支持数据改变过渡动画
|
27天前
|
开发者 监控 开发工具
如何将JSF应用送上云端?揭秘在Google Cloud Platform上部署JSF应用的神秘步骤
【8月更文挑战第31天】本文详细介绍如何在Google Cloud Platform (GCP) 上部署JavaServer Faces (JSF) 应用。首先,确保已准备好JSF应用并通过Maven构建WAR包。接着,使用Google Cloud SDK登录并配置GCP环境。然后,创建`app.yaml`文件以配置Google App Engine,并使用`gcloud app deploy`命令完成部署。最后,通过`gcloud app browse`访问应用,并利用GCP的监控和日志服务进行管理和故障排查。整个过程简单高效,帮助开发者轻松部署和管理JSF应用。
35 0
|
27天前
|
开发者 容器 Java
Azure云之旅:JSF应用的神秘部署指南,揭开云原生的新篇章!
【8月更文挑战第31天】本文探讨了如何在Azure上部署JavaServer Faces (JSF) 应用,充分发挥其界面构建能力和云平台优势,实现高效安全的Web应用。Azure提供的多种服务如App Service、Kubernetes Service (AKS) 和DevOps简化了部署流程,并支持应用全生命周期管理。文章详细介绍了使用Azure Spring Cloud和App Service部署JSF应用的具体步骤,帮助开发者更好地利用Azure的强大功能。无论是在微服务架构下还是传统环境中,Azure都能为JSF应用提供全面支持,助力开发者拓展技术视野与实践机会。
12 0
|
28天前
|
开发框架 API 开发者
Flutter表单控件深度解析:从基本构建到高级自定义,全方位打造既美观又实用的移动端数据输入体验,让应用交互更上一层楼
【8月更文挑战第31天】在构建美观且功能强大的移动应用时,表单是不可或缺的部分。Flutter 作为热门的跨平台开发框架,提供了丰富的表单控件和 API,使开发者能轻松创建高质量表单。本文通过问题解答形式,深入解读 Flutter 表单控件,并通过具体示例代码展示如何构建优秀的移动应用表单。涵盖创建基本表单、处理表单提交、自定义控件样式、焦点管理和异步验证等内容,适合各水平开发者学习和参考。
28 0
|
2月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
34 1
|
2月前
Flutter-自定义画板
Flutter-自定义画板
24 0
Flutter-自定义画板
|
2月前
|
移动开发 UED 容器
Flutter-自定义可展开文本控件
Flutter-自定义可展开文本控件
64 0
|
2月前
Flutter-自定义折叠流布局实现
Flutter-自定义折叠流布局实现
46 0
|
2月前
Flutter-自定义三角形评分控件
Flutter-自定义三角形评分控件
31 0