Flutter 中如何优雅地使用弹框

在这里插入图片描述
日常开发中,Flutter 弹框(Dialog)是我们使用频率非常高的控件。无论是提示用户信息、确认用户操作,还是表单填写,弹框都能派上用场。然而,看似简单的弹框,实际使用起来却有不少坑和使用的技巧。今天,我们就来聊聊这些弹框的使用技巧,文末还有关于在 bloc 如何使用弹框的内容,保证你看完之后干货满满,下面直接开始吧。

返回值的处理

用户在点击退出登录时,通常的做法就是弹框用来确认是否退出登录,返回值是 bool 类型,为 true 表示退出登录,反之不需要退出,这个时候应该怎处理这个 bool 类型的返回值呢?我们先来看看最常见的写法。

_showDialogWithCallBack(Function(bool) callBack){
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text("Logout"),
        content: const Text("Are you sure you want to logout?"),
        actions: [
          TextButton(
            onPressed: () {
              callBack(false);
              Navigator.of(context).pop();
            },
            child: const Text("Cancel"),
          ),
          TextButton(
            onPressed: () {
              callBack(true);
              Navigator.of(context).pop();
            },
            child: const Text("Sure"),
          )
        ],
      );
    },
  );
}

点击按钮后调用 _showDialogWithCallBack 函数来显示弹框。

TextButton(
  onPressed: () {
    _showDialogWithCallBack((result) {
      print("Result: $result");
    });
  },
  child: Text('Dialog with callBack'),
)

除了上面这种使用回调函数传递结果,还有没有其它更加优雅的写法呢?我们知道 showDialog 本身返回的就是 Future 对象,如果需要在 Dialog 关闭后继续执行一些其它逻辑,我们可以使用 awaitasync 关键字来接收返回数据处理异步操作,下面来看看该怎么实现。

Future<bool?> _showAsyncDialog() {
  return showDialog<bool>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text("Logout"),
        content: const Text("Are you sure you want to logout?"),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(false);
            },
            child: const Text("Cancel"),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(true);
            },
            child: const Text("Sure"),
          )
        ],
      );
    },
  );
}

利用 Navigator.of(context).pop(true) 方法来关闭对话框,并传递 true 或者 false 值作为对话框的返回结果,当点击按钮调用 _showAsyncDialog 弹出 Dialog

TextButton(
  onPressed: () async {
    bool? result = await _showAsyncDialog();
    print("Result: $result");
  },
  child: Text('Async Dialog'),
)

在返回 result 之后再去处理其它的逻辑,相对于使用回调函数来处理结果,这种写法是不是更加的简洁,避免了回调函数那种代码嵌套,代码看起来也更清晰易懂吧。

如果 Dialog 中带有表单(如:TextField)该如何处理返回数据呢?其实和上面的处理方式是一样的,也可使用 asyncawait 来处理 showDialog 返回的 Future 对象,以返回用户输入的年龄(int 类型)为例,其实现如下:

Future<int?> _getAge(BuildContext context) {
  final controller = TextEditingController();
  return showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("How old are you?"),
          content: TextField(
              decoration: const InputDecoration(hintText: "e.g:22"),
              keyboardType: TextInputType.number,
              autofocus: true,
              maxLength: 3,
              controller: controller,
              inputFormatters: [
                TextInputFormatter.withFunction((oldValue, newValue) {
                  if (newValue.text.isEmpty) return newValue;
                  try {
                    final age = int.parse(newValue.text);
                    if (age > 120) return oldValue;
                    return newValue;
                  } catch (err) {
                    return oldValue;
                  }
                })
              ]),
          actions: [
            TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text("Cancel")),
            TextButton(
                onPressed: () {
                  final age = int.parse(controller.text);
                  Navigator.of(context).pop(age);
                },
                child: const Text("Save"))
          ],
        );
      });
}

类似上面这种写法也同样适用于各种类型的 ActionSheet 返回值的处理。

自定义 Dialog 内容

上面的例子中 showDialogbuilder 函数返回内容都使用的是 AlertDialog 类,它属于 Material 设计风格的,而在我们平时开发的时候往往需要根据设计稿定制自己的 Dialog ,这个时候就需要自定义 Dialog 的内容了,如直接在 builder 函数中返回自定义的 widget 类,但是这个时候需要自己处理圆角、边框和阴影,还有处理点击对话框外部自动关闭对话框等功能。如果想要快速的实现一个自定义内容的弹框可以使用 Dialog 组件。

class Dialog extends StatelessWidget {
  const Dialog({
    super.key,
    this.backgroundColor,
    this.elevation,
    this.shadowColor,
    this.surfaceTintColor,
    this.insetAnimationDuration = const Duration(milliseconds: 100),
    this.insetAnimationCurve = Curves.decelerate,
    this.insetPadding = _defaultInsetPadding,
    this.clipBehavior = Clip.none,
    this.shape,
    this.alignment,
    this.child,
  }) : assert(clipBehavior != null),
       assert(elevation == null || elevation >= 0.0),
       _fullscreen = false;
  
  // .....
}

Dialog 小组价的构造函数可以看出来,其本身内置了背景色、阴影、边框、对其、边距和动画等属性,为对话框提供了默认样式和行为,定制自己的对话框时改起来也很方便。实现代码如下:

_showCustomDialog() {
  showDialog(
    context: context,
    // 设置背景透明度
    barrierColor: Colors.black.withOpacity(0.5),
    builder: (BuildContext context) {
      return Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
        ),
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              SizedBox(height: 10),
              Text('Custom Dialog Title', style: TextStyle(fontSize: 20)),
              SizedBox(height: 16),
              Text('This is a custom dialog content.'),
              SizedBox(height: 16),
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('OK'),
              ),
              SizedBox(height: 10),
            ],
          ),
        ),
      );
    },
  );
}

bloc 中使用弹框

在使用 bloc(业务逻辑组件)进行状态管理时,很多的时候特定的业务逻辑执行过程中弹出对话框,如保存表单数据时,如果出现网络错误或验证错误,可以弹出对话框通知用户;执行删除操作时需要弹出对话框让用户确认操作是否继续;执行耗时操作弹出一个加载对话框,向用户展示操作正在进行,特别是在和硬件网关 zigbee 通信时,如查找设备,会有等待和重试的过程;以及完成某个操作时提示用户操作结果等等场景。但是我们在调用 showDialog 又需要传 context 参数,context 是用来标记 widgetwidget tree 的位置,bloc 中获取不到 context,那么在bloc 中使用弹框改如何实现呢?

还记得在《Flutter大型项目架构:路由管理篇》文章中实现的 AppNavigatorImpl 类吗?还有实现的 pushpop等操作,我们今天要实现在 bloc 弹框也是在 AppNavigatorImpl 类中实现。首先在其抽象类 AppNavigator 中添加如下代码:

abstract class AppNavigator {
	// ...
  Future<T?> showDialog<T extends Object?>(
    AppPopupInfo appPopupInfo, {
    bool barrierDismissible = true,
    bool useSafeArea = false,
    bool useRootNavigator = true,
  });
  // ...
}

AppNavigatorImpl 实现 showDialog 函数:

(as: AppNavigator)
class AppNavigatorImpl extends AppNavigator with LogMixin {
  AppNavigatorImpl(
    this._appRouter,
    // 注入 PopupInfoMapper
    this._appPopupInfoMapper,
    this._appRouteInfoMapper,
  );

  TabsRouter? tabsRouter;

  final AppRouter _appRouter;
  // BasePopupInfoMapper 是抽象类, PopupInfoMapper 的父类
  final BasePopupInfoMapper _appPopupInfoMapper;
  final BaseRouteInfoMapper _appRouteInfoMapper;
  final _popups = <AppPopupInfo>{};
  
  StackRouter? get _currentTabRouter =>
      tabsRouter?.stackRouterOfIndex(currentBottomTab);

  StackRouter get _currentTabRouterOrRootRouter =>
      _currentTabRouter ?? _appRouter;

  BuildContext get _rootRouterContext =>
      _appRouter.navigatorKey.currentContext!;

  BuildContext? get _currentTabRouterContext =>
      _currentTabRouter?.navigatorKey.currentContext;

  BuildContext get _currentTabContextOrRootContext =>
      _currentTabRouterContext ?? _rootRouterContext;
  
    
  int get currentBottomTab {
    if (tabsRouter == null) {
      throw 'Not found any TabRouter';
    }
    return tabsRouter?.activeIndex ?? 0;
  }
  
  
  Future<T?> showDialog<T extends Object?>(
    AppPopupInfo appPopupInfo, {
    bool barrierDismissible = true,
    bool useSafeArea = false,
    bool useRootNavigator = true,
  }) {
    if (_popups.contains(appPopupInfo)) {
      return Future.value(null);
    }
    _popups.add(appPopupInfo);
    
    return showDialog<T>(
      context: useRootNavigator
          ? _rootRouterContext
          : _currentTabContextOrRootContext,
      builder: (_) => m.WillPopScope(
        onWillPop: () async {
          _popups.remove(appPopupInfo);
          return Future.value(true);
        },
        child: _appPopupInfoMapper.map(appPopupInfo, this),
      ),
      useRootNavigator: useRootNavigator,
      barrierDismissible: barrierDismissible,
      useSafeArea: useSafeArea,
    );
  }
}

这里的 _rootRouterContextauto_route 的根 navigatorKey 提供的,用于管理和控制导航操作,这样可以实现在整个应用程序的任何地方访问和操作导航堆栈。auto_route 库通过 NavigatorGlobalKey 的结合实现了对 navigatorKey 的支持。_currentTabRouterContext 是当前所显示的 tabnavigatorKey 提供的,负责当前 tab 及子页面的导航操作。当调用 showDialog 时就可以使用 _rootRouterContext 或者 _currentTabContextOrRootContext 参数,这就解决了 context 参数的问题了。

AppPopupInfoAppRouteInfo 的作用是一样的,实现了抽象类 BasePopupInfoMapper,使用 @freezed 注解,在 AppPopupInfoMappermap 函数中使用 when 可根据不同工厂方法返回不同类型的 AppPopupInfo 实例。


class AppPopupInfo with _$AppPopupInfo {
  const factory AppPopupInfo.confirmDialog({
    ('') String message,
    Function<void>? onPressed,
  }) = _ConfirmDialog;
}

abstract class BasePopupInfoMapper {
  Widget map(AppPopupInfo appRouteInfo, AppNavigator navigator);
}

(as: BasePopupInfoMapper)
class AppPopupInfoMapper extends BasePopupInfoMapper {
  
  Widget map(AppPopupInfo appPopupInfo, AppNavigator navigator) {
    return appPopupInfo.when(
      confirmDialog: (message, onPressed) {
        // 这里返回的是 Dialog 的内容
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.0),
          ),
          child: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(message),
                SizedBox(height: 16),
                TextButton(
                  onPressed: onPressed,
                  child: Text('OK'),
                ),
                SizedBox(height: 10),
              ],
            ),
          ),
        );
      },
    );
  }
}

bloc 中或者页面中调用:

navigator.showDialog(AppPopupInfo.confirmDialog(
  message: "显示弹框",
  onPressed: () {
    //...
  }));

这里的 navigator 是从哪里来的呢?在《Flutter大型项目架构:路由管理篇》文章中最后一部分bloc 中使用 navigator 跳转页面介绍了将 navigator 注入到 BaseBlocBasePageState,感兴趣的可以去看看,这样无论是在 bloc 层还是 page 页面都能使用 navigator 跳转页面和弹出 Dialog 等操作,在 bloc 层使用 ActionSheetToast 等和 Dialog 一样的逻辑。

bloc 层使用弹框的实现过程其实也是路由管理的一部分,本篇文章是单独把弹框的使用做一个集锦,也希望能够帮到你。那么,在项目中你是如何使用弹框的呢,关于弹框的使用有什么好的建议和想法欢迎留言,感谢您的阅读,记得关注加点赞哦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/639205.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

el-select可选择可搜索可输入新内容

需求&#xff1a;el-form-item添加el-select&#xff0c;并且el-select可选择可搜索可输入新内容&#xff0c;并且和其他的el-input做联动&#xff0c;如果是选择&#xff0c;那么el-input自动回填数据并且不可编辑&#xff0c;如果el-select输入新的内容&#xff0c;那么el-in…

webpack5 splitChunks分割代码

首先明确webpack 自身的打包行为 当splitChunks为false时&#xff0c;此时不启用任何打包设置 可以看到&#xff0c;静态引入全都打到一个chunk里&#xff0c;动态引入会拆分出来一个chunk,这是纯webpack无配置的打包&#xff0c; webpack会给每个模块打上标记 ,如下 { m…

【HCIP学习】RSTP和MSTP

一、RSTP&#xff08;Rapid Spanning Tree Protocol&#xff0c;快速生成树&#xff09; 1、背景&#xff1a;RSTP从STP发展而来&#xff0c;具备STP的所有功能&#xff0c;可以兼容stp运行 2、RSTP与STP不同点 &#xff08;1&#xff09;减少端口状态 STP:disabled\blockin…

抵御风险——漫谈运维核心价值和方法论

要明晰什么是运维的核心价值&#xff0c;也就是要弄明白&#xff0c;从整个软件行业运维的角色定位来看&#xff0c;运维的核心价值在哪里&#xff1f;怎样增强自己实现核心价值的能力的问题。 软件产业本质其实还是工业&#xff0c;它的产品和传统的工业产品形态虽然有巨大差…

汇舟问卷:海外问卷调查如何闭坑?

大家好&#xff0c;我是汇舟问卷。有很多人问我这行有什么骗局吗&#xff1f;怎么说呢&#xff1f;其实每个行业都是真实存在的&#xff0c;也都有赚到钱的和赚不到钱的&#xff0c;那区别在哪里呢&#xff1f; 在你的源头&#xff0c;也就是教你或者说是代理加盟的上家&#…

机器学习实验 --- 逻辑回归

第1关:逻辑回归核心思想 任务描述 本关任务:根据本节课所学知识完成本关所设置的编程题 #encoding=utf8 import numpy as npdef sigmoid(t):完成sigmoid函数计算:param t: 负无穷到正无穷的实数:return: 转换后的概率值:可以考虑使用np.exp()函数#********** Begin *******…

景源畅信数字:抖音小店新手该怎么做?

在数字化时代的浪潮中&#xff0c;抖音不仅仅是一个分享短视频的平台&#xff0c;更是一个充满潜力的电商平台。对于想要进入这个领域的朋友们来说&#xff0c;开设一家抖音小店无疑是一个既激动又迷茫的起点。那么&#xff0c;作为新手&#xff0c;该如何在这个全新的舞台上立…

笔记 | 《css权威指南》

网络安全色 URL text-indent line-height & vertical-align 字体 font-weight 400 normal 700 bold background-attachment

iOS系统故障怎么办?这三种苹果手机系统修复方法你一定要知道

随着苹果手机使用时间越长&#xff0c;苹果手机有时也会出现系统问题&#xff0c;如卡顿、崩溃、无法启动等。这些问题不仅影响用户的使用体验&#xff0c;还可能导致数据丢失。因此&#xff0c;掌握苹果手机系统修复方法显得尤为重要。本文将详细介绍苹果手机系统修复的常见方…

MyBatis入门(1)

目录 一、JDBC操作回顾 二、什么是MyBatis&#xff1f; 三、MyBatis入门 1、准备工作 &#xff08;1&#xff09;创建工程 &#xff08;2&#xff09;数据准备 2、配置数据库连接字符串 3、写持久层代码 4、单元测试 &#xff08;1&#xff09;使用IDEA自动成成测试类…

UFS协议—新手快速入门(一)【1-4】

本篇旨在为初学者提供关于通用闪存存储&#xff08;UFS&#xff09;的快速入门指南。 目录 一、背景介绍 二、UFS 三、半双工和全双工 &#xff08;1&#xff09;半双工&#xff08;Half-Duplex&#xff09; &#xff08;2&#xff09;全双工&#xff08;Full-Duplex&…

【大模型】fineturn Q-wen

github上下载qwen1_5源码 修改finetun.sh 然后在路径qwen1_5/examples/sft下修改finetun.sh, 内容如下 #!/bin/bash export CUDA_DEVICE_MAX_CONNECTIONS1 DIRpwd# Guide: # This script supports distributed training on multi-gpu workers (as well as single-worker trai…

【HTML】制作一个跟随鼠标的流畅线条引导页界面(可直接复制源码)

目录 前言 HTML部分 CSS部分 JS部分 效果图 总结 前言 无需多言&#xff0c;本文将详细介绍一段HTML代码&#xff0c;图中线条可跟随鼠标移动&#xff0c;具体内容如下&#xff1a; 开始 首先新建一个HTML的文本&#xff0c;文本名改为[index.html]&#xff0c;创建好后右…

弱电工程企业项目一体化管理系统解决方案!企智汇项目管理系统

企智汇工程项目管理系统是一款为弱电工程企业量身打造的专业解决方案&#xff0c;旨在帮助企业实现项目管理的数智化、全流程化和一体化。以下是该系统的详细介绍&#xff1a; 1. 功能丰富&#xff1a;企智汇工程项目管理系统支持全周期的项目管理&#xff0c;包括客户管理、招…

火山引擎边缘云亮相 Force 原动力大会,探索 AI 应用新范式

5月15日&#xff0c;2024 春季火山引擎 FORCE 原动力大会在北京正式举办。大会聚焦 AI 主题&#xff0c;以大模型应用为核心、以 AI 落地为导向&#xff0c;展示了火山引擎在大模型、云计算领域的实践应用&#xff0c;携手汽车、手机终端、金融、消费、互联网等领域的专家和企业…

【全开源】班级管家微信小程序(FastAdmin+ThinkPHP)

班级管家微信小程序 班级管家微信小程序&#xff0c;作为一款专注于家校沟通、作业管理、成绩发布等方面的工具&#xff0c;凭借其丰富的特色功能和显著的优势&#xff0c;已经成为广大教师、家长和学生日常学习生活中不可或缺的一部分。 一、特色功能 家校沟通便捷&#xff…

大模型之Ollama:在本地机器上释放大型语言模型的强大功能

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

从“图形可视化”到“图生代码”,低代码平台的新挑战

前言&#xff1a; 低代码平台最大的一个特点就是可视化&#xff0c;将代码采用可视化的方式展示管理。一时间拥有图形化界面的各类系统都挂上了低代码的标签。但更多的代码从业者在使用中却发现&#xff0c;在众多的低代码平台中都是“别人家的代码”其可视化主要是别人家的代…

vmware 17pro17.5 bug 严重,建议升级17.52

近日vmware发布17.52 更新&#xff0c;修复了一个重大BUG. 也就是莫名其妙的CPU跟GPU占用问题。 我的系统是WIN11 跟VMWARE17.5..近日莫名其妙的发现即使什么都没运行&#xff0c;GPU占用也高达20%。开始以为中毒了被拿去挖矿了&#xff0c;后面看到VMWARE的这个更新&#xf…