flutter在initState中显示Dialog加载框

Future.delayed(Duration.zero, () {

成都创新互联公司主营延平网站建设的网络公司,主营网站建设方案,手机APP定制开发,延平h5重庆小程序开发搭建,延平网站营销推广欢迎延平等地区企业咨询

showDialog(

context: context,

barrierDismissible: false,

builder: (_) {

return LoadingDialog();

});

});

Flutter 124: 日常问题小结 (三) 自定义 Dialog 二三事

针对日常不同的需求，我们时常需要自定义 Dialog ，而小菜在尝试过程中遇到一些小问题，简单记录总结一下；

小菜在自定义含有文本框的 Dialog 时，文本框获取焦点时，软键盘会部分遮挡对话框，但当小菜替换为 AlertDialog 时，文本框获取焦点时，对话框会向上浮动，避免软键盘遮挡；

对于含有文本框的自定义 Dialog ，小菜在最外层使用的是 Material 嵌套，小菜通过采用 Scaffold 来嵌套处理，默认 Scaffold 中 resizeToAvoidBottomPadding / resizeToAvoidBottomInset 为 true ，当设置为 false 时，文本框获取焦点时，依旧会被软键盘遮挡；因为在固定情景可以配合 resizeToAvoidBottomPadding 实现是否被软键盘遮挡效果；

resizeToAvoidBottomPadding 主要用于自身 Widget 是否避免被其他窗口遮挡；其中小菜查资料介绍在 Flutter 1.1.9 之后更推荐使用 resizeToAvoidBottomInset ；

小菜自定义一个可以多选 item 的 Dialog ，但 Dialog 中并没有状态更新的 State ，如何进行 Dialog 中状态更新呢？

小菜之前在 showDialog 时直接创建了 TypeListDialog ，此时是无状态的，当 WidgetBuilder 创建一个 StatefulBuilder 有状态的构造器即可，可以将 state 传递到 Dialog 中；

小菜在自定义 Dialog 时如何在一个回调方法中传递多个参数？

小菜在 Dialog 的回调方法中传递两个 List ，而在接收回调方法中匹配两个参数即可；小菜简单看作是一个函数方法；

小菜在重写 AppBar 时，如何取消默认的返回按钮？

取消 AppBar 前面的返回图标有多种方式；

自定义 Dialog 案例源码

小菜对于 Flutter 的应用还不够熟悉，很多常用的场景会处理的很不到位，小菜会对日常的小问题进行简单记录，逐步学习；如有错误，请多多指导！

flutter中关于软键盘弹起导致的问题

原因：在flutter中，键盘弹起时系统会缩小Scaffold的高度并重建

1）把Scaffold的resizeToAvoidBottomInset属性设置为false，这样在键盘弹出时将不会resize

2）把写死的高度改为 原高度 - MediaQuery.of(context).viewInsets.bottom ，键盘弹出时布局将重建，而这个 MediaQuery.of(context).viewInsets.bottom 变量在键盘弹出前是0，键盘弹起后的就是键盘的高度

将输入框放进可滚动的Widget中即可，当输入框获取焦点后，系统会自动将它滑动到可视区域

Flutter 22: 图解 PopupMenu 那些事儿

小菜需要处理标题栏弹出对话框 PopupMenu 样式， Flutter 当然提供了一些处理方式，类似 PopupMenuEntry 等，小菜仅就最基础的使用方式进行初步的学习和整理。

PopupMenuItem 为单个 item 的弹出样式，默认为 48px 高，可根据需求自行定义。 item 中可以自定义需要的样式，包括文字图片等一系列样式。

Tips: 若需要处理带图标的样式时，官网提供的 Demo 是借助的 ListTile 来处理的，但是小菜测试发现图标与文字距离偏大，原因在于 ListTile 默认左侧图标 leading 距离不可直接调整，建议用 Row 或其他方式调整。

CheckedPopupMenuItem 是一个带有复选标记的弹出菜单项。默认高度同样是 48px ，水平布局使用 ListTile 复选标记是 Icons.done 图标，显示在 leading 位置；同时只有在状态为选中时才会显示图标。

PopupMenuDivider 是一条水平分割线，注意数组要使用父类 PopupMenuEntry ，配合其他 item 样式共同使用。 PopupMenuDivider 可以调整高度，但无法调整颜色，有需要的话可以进行自定义。

PopupMenu 默认的弹框位置都是在右上角，且会挡住标题栏，如果有需要在其他位置弹框就需要借助 showMenu ，主要通过 position 属性定位弹框位置。

menu 的宽高与内容相关，小菜的理解是在水平和竖直方向上会将设置的 position 位置加上 menu 宽高，再与屏幕匹配，超过屏幕宽高，根据 position 按照 LTRB 顺序贴近屏幕边框展示。

Tips: 如果 item 个数过多也无需担心，Flutter 支持默认超过屏幕滑动效果。

小菜目前的学习还仅限于基本的使用，稍高级的自定义涉及较少，如果又不对的地方还希望多多指出。

flutter 键盘弹出时list view 置底

1、点击输入flutter框弹出软键盘时，遮挡本输入框一部分。

2、点击输入框，输入框跟随软键盘自动上移时其他不该移动的内容也跟随上移导致的flutter键盘弹出时listview置底。

Flutter中showDialog()后关闭Dialog

在耗时操作的时候，一般都要弹出一个加载框，然后在完成的时候再把加载框关掉，在Flutter中可以直接用showDialog()来弹出一个对话框。

这是一个简单的提示对话框，包含了关闭按钮，点击就能关闭。但一般的耗时操作完成，就需要我们自己把dialog关闭掉。

首先，开启dialog的时机。由于我们需要获取到BuildContext，所以就得等build()方法走完，这里可以用Future.delayed()来等创建好BuildContext再进行创建，或者用Timer来延迟操作，我选择了前者。

其中delayed()在initState()结尾来做就行，这里参考网友封装了一个LoadingDialog。

那么接下来要在什么时机关闭呢？

一开始，我理所当然的以为，是在异步方法结束后，去更新界面的时候关闭，也就是setState(() {})的时候，可是不管怎么尝试，用Navigator.pop()不行，用Navigator.of(context, rootNavigator: true).pop(result)也不行，用FlutterBoost.singleton.close(id)也不行，用FlutterBoost.singleton.closeCurrent()也不行，都会直接把非Dialog的页面也关闭掉，这让我百思不得其解，因为showDialog()的本质也是新建了一个Route出来，也就是最顶层的页面是弹出的Dialog，可是为什么关不掉呢。

一番思前想后，把showDialog的逻辑移到和异步逻辑同级，也就是setState(() {})外面，然后把showDialog()自身创建的BuildContext传进去就能正常关闭了。也就是，在setState(() {})的时候，其实用的context还是非Dialog页面的，所以关闭的当然就不是Dialog了。

持有Dialog自己的BuildContext，然后在异步以后调用就行了。