flutter useRootNavigator属性的作用

简介: flutter useRootNavigator属性的作用

useRootNavigator

用于确定是否将对话框推到距给定上下文最远或最接近给定上下文的Navigator

问题:

在使用showDatePicker的时候,android手机如果侧滑返回的时候,页面会关闭,showDatePicker弹出的dailog缺没有关闭。

使用如下:

Future<void> pickDate() async {
    var pickDateTime = await showDatePicker(
        context: context,
        initialDate: today,
        lastDate: today,
        firstDate: DateTime(today.year-1, today.month, today.day));
 
    if(pickDateTime != null && date != pickDateTime) {
      date = pickDateTime;
      _model.dataTime = date;
      _refresh();
    }
  }

showDatePicker 方法显示一个包含日期选择器的对话框 。当用户关闭对话框时,返回的 Future 解析为用户选择的日期。如果用户取消对话框,则返回 null

方法定义如下:

 
Future<DateTime> showDatePicker({
  //BuildContext类型必传参数,上下文
  @required BuildContext context,
  //DateTime类型必传参数,初始化选中的时间日期
  @required DateTime initialDate,
  //DateTime类型必传参数,可呈现的开始日期
  @required DateTime firstDate,
  //DateTime类型必传参数,可呈现的结束日期
  @required DateTime lastDate,
  //SelectableDayPredicate类型可选命名参数,用于设置可选择的时间区域,是一个函数
  SelectableDayPredicate selectableDayPredicate,
  //DatePickerMode类型可选命名参数,日期对话框的初始显示模式
  DatePickerMode initialDatePickerMode = DatePickerMode.day,
  //Locale类型可选命名参数,本地化设置
  Locale locale,
  //TextDirection类型可选命名参数,文本的显示方向
  TextDirection textDirection,
  //TransitionBuilder类型可选命名参数,构建子Widget的构建器
  TransitionBuilder builder,
  //bool类型可选命名参数,参数用于确定是否将对话框推到距给定上下文最远或最接近给定上下文的Navigator
  bool useRootNavigator = true,
}) 

怎么在页面关闭的时候关闭dialog呢?

将useRootNavigator置为false即可。


Flutter -- Dialog 随记

这篇文章主要是记录一些本人在项目中遇到的一些Dialog的坑和解决方案.方案虽一般般,但愿可以给大家一些建议吧,同时也希望大家一起多多交流,不吝赐教。

Future<T> showDialog<T>({BuildContext context, bool barrierDismissible, Widget child, Widget Function(BuildContext) builder, bool useRootNavigator, RouteSettings routeSettings})

showDialog :是在做项目时,经常使用到的一个显示弹窗函数,用于制作一些提示弹窗和用户操作弹窗路由。showDialog 具体的实现源码,这里就不展开聊,在网上有比较多的Flutter源码解析。这里我们主要聊聊我在项目中使用showDialog的一些愚见。

我们先聊聊接口参数的用途:

context  一般为当前路由的context,

barrierDismissible 控制弹窗点击空白区域是否可以关闭弹窗,默认为true

child  根据需求自定义的Widget,

builder  这个参数是一个返回widget 的回调函数,child 和builder 只能使用一个

useRootNavigator 默认为true,用于确定是否将弹窗推送到“context”最远的Navigator,true 为推送到最远,用于处理多个Navigator的情况,一般保持默认就好了

routeSettings 包含弹窗路由的配置信息,如路由的名称和传递的参数

平时项目中showDialog 一般无法满足产品的需求,产品一般都会要求我们给弹窗加上不同的展示动效或者不同颜色的遮罩,

源码:

showDialog 方法的源码

从我源码的截图可以看到,由于遮罩颜色和展示动效都是封装好的,因此我们无法传参进行修改。

这种情况我这边有两种处理方式:1.直接使用 showGeneralDialog 函数,showDialog 也是封装的这个,showGeneralDialog  函数提供参数足以应付产品的需求了,也可以自己对showGeneralDialog 进行自己的封装,然后提供一个类似 showDialog 的接口

2.如果产品对弹窗效果要求不高,改动不大话。就可以把showDialog 函数的代码复制到自己脚本上,然后把barrierColor Transition 作提为参数,也可以在这个函数上做一些自己的拓展。

这两种方法各位看官自行选择,其实都差不多,第二个偷了一些小懒而已,通过上面的说明,大家应该对showDialog 有一定的了解了。接下来主要写一些项目中遇到的一些问题,可能会持续更新吧。

弹窗不允许被手机的物理返回按钮关闭

解决方案:我查看dialog 的源码中并没有发现有提供字段去控制这个开关,因此直接使用showDialog 显示出来的弹窗,往往都会被手机物理返回按钮关闭。这里说一个禁用手机物理返回按钮的控件 WillPopScope ,这个控件提供onWillPop 回调函数来进行路由退出的管理,而手机物理返回按钮触发的是navigator.of(context).pop() 来关闭路由的,但是 Flutter 在触发navigator.of(context).pop() 之前会先检测需关闭的路由是否存在WillPopScope 控件,如果存在就根据onWillPop 回调进行路由退出处理,由于我在项目中使用的是第二种方法,因为我只是直接把WillPopScope 写入到自己的showDialog  脚本里面,并提供一个开关。

相关文章
|
4月前
|
容器
flutter GestureDetector 的 behavior属性
【8月更文挑战第21天】
88 4
|
4月前
|
存储 开发者 UED
Flutter笔记:谈Material状态属性-为什么FlatButton等旧版按钮就废弃了
Flutter笔记:谈Material状态属性-为什么FlatButton等旧版按钮就废弃了
94 4
|
7月前
|
前端开发 开发者
Flutter Canvas 属性详解与实际运用
Flutter Canvas 属性详解与实际运用
169 1
|
7月前
|
Dart 开发者
Flutter笔记 - 关于 fit 属性以及相关知识的总结
Flutter笔记 - 关于 fit 属性以及相关知识的总结
256 0
|
7月前
|
编解码 调度 UED
Flutter笔记:Flutter的WidgetsBinding.instance的window属性
Flutter笔记:Flutter的WidgetsBinding.instance的window属性
238 0
|
7月前
|
存储 API
Flutter中 useRootNavigator 属性的作用
Flutter中 useRootNavigator 属性的作用 在Flutter中,Navigator是管理应用程序页面导航的一个重要组件。Navigator管理着一个栈结构,用于存储应用程序中所有活动页面的历史记录。Flutter提供了许多Navigator相关的API,其中包括 useRootNavigator 属性。
152 0
|
存储 容器
flutter系列之:做一个修改组件属性的动画
什么是动画呢?动画实际上就是不同的图片连续起来形成的。flutter为我们提供了一个AnimationController来对动画进行详尽的控制,不过直接是用AnimationController是比较复杂的,如果只是对一个widget的属性进行修改,可以做成动画吗? 答案是肯定的,一起来看看吧。
Flutter 之 appbar 常用属性
Flutter 之 appbar 常用属性
177 0
|
2月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
1月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
57 8