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 我们在此处处理页面的关闭
相关文章
|
13天前
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
74 1
|
15天前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
111 1
|
15天前
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
64 1
|
15天前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
64 1
|
15天前
|
Dart 搜索推荐 API
Flutter & 鸿蒙next版本:自定义对话框与表单验证的动态反馈与错误处理
在现代移动应用开发中,用户体验至关重要。本文探讨了如何在 Flutter 与鸿蒙操作系统(HarmonyOS)中创建自定义对话框,并结合表单验证实现动态反馈与错误处理,提升用户体验。通过自定义对话框和表单验证,开发者可以提供更加丰富和友好的交互体验,同时利用鸿蒙next版本拓展应用的受众范围。
65 1
|
2月前
|
前端开发 搜索推荐
Flutter中自定义气泡框效果的实现
Flutter中自定义气泡框效果的实现
82 3
|
3月前
|
前端开发
Flutter快速实现自定义折线图,支持数据改变过渡动画
Flutter快速实现自定义折线图,支持数据改变过渡动画
91 4
Flutter快速实现自定义折线图,支持数据改变过渡动画
|
3月前
|
开发者 监控 开发工具
如何将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应用。
60 0
|
3月前
|
开发者 容器 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应用提供全面支持,助力开发者拓展技术视野与实践机会。
18 0
|
3月前
|
开发框架 API 开发者
Flutter表单控件深度解析:从基本构建到高级自定义,全方位打造既美观又实用的移动端数据输入体验,让应用交互更上一层楼
【8月更文挑战第31天】在构建美观且功能强大的移动应用时,表单是不可或缺的部分。Flutter 作为热门的跨平台开发框架,提供了丰富的表单控件和 API,使开发者能轻松创建高质量表单。本文通过问题解答形式,深入解读 Flutter 表单控件,并通过具体示例代码展示如何构建优秀的移动应用表单。涵盖创建基本表单、处理表单提交、自定义控件样式、焦点管理和异步验证等内容,适合各水平开发者学习和参考。
80 0