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

Posted 2023-04-18

参考技术A

    针对日常不同的需求，我们时常需要自定义 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 专题55 日常问题小结 #yyds干货盘点#

      小菜作为初学者，基础薄弱，继续整理日常小问题；

问题一：依赖版本冲突

      Flutter 的更新很频繁，而我们本地的环境可能会是一个较低的稳定版本，而我们使用的插件可能版本较高，在集成时可能会遇到如下冲突；

尝试一：

      在 pub.dev 中找到问题的插件，根据更新列表逐个低版本尝试，注意需要替换成固定版本(无 ^)，直到正常使用版本，虽然靠谱但是可能尝试次数很多；

尝试二：

1. 将出问题的插件版本更换为 any，如：json_annotation: any；
2. Package get 更新插件，自动匹配；
3. 在 pubspec.lock 文件中找到问题插件，系统会自动匹配安全版本(小菜测试可能与逐个排查的版本不一致)；
4. 在 pubspec.yaml 中替换这个安全版本即可，注意：any 只是用来辅助查找安全版本，在实际项目中不建议用，可能会出现适配问题；
   

尝试三：

      最根本的解决方法是升级本地 SDK 版本，这样成本较高，可能会引起其他插件的兼容问题，需整体处理；

问题二：新页面初始化对话框失败

      小菜因需求，准备打开新的页面时先弹出对话框供用户选择，小菜在 initState 方法初始化，但一直提示页面未初始化，弹框位置错误；

尝试一：

      小菜根据错误提示将弹窗位置调整到 didChangeDependencies 和 build 中且异步尝试，同样失败，提示需要父类组件构建成功之后才可以构建子组件；

尝试二：

      小菜前几天学习生命周期，稍稍看了一点 WidgetsBinding，用作绑定 Widget 框架和 Flutter engine 的桥梁；通过 addPostFrameCallback 监听 Frame 绘制最后一帧，同时可以获取元素大小；且整个生命周期只会执行一次；

WidgetsBinding widgetsBinding = WidgetsBinding.instance;

@override
void didChangeDependencies() 
  super.didChangeDependencies();
  widgetsBinding.addPostFrameCallback((callback) 
    showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) 
          return GenderChooseDialog(
              title: 小哥哥小姐姐请选择,
              onBoyChooseEvent: () => Navigator.pop(context),
              onGirlChooseEvent: () => Navigator.pop(context));
        );
  );

问题三：列表居中

      小菜在跟朋友聊天时讨论如何如何将列表在屏幕居中，小菜尝试了 Center 内嵌套 ListView 但不能居中；

      查了一下资料和源码，直接设置 ListView 的 shrinkWrap=true 即可；shrinkWrap 可以设置 ListView 只占用所需要的空间；

Widget _listItemWid(values) 
  return Center(
      child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          physics: const AlwaysScrollableScrollPhysics(),
          padding: const EdgeInsets.all(6.0),
          itemCount: values == null ? 0 : values.length,
          itemBuilder: (context, i) 
            return Padding(
                padding: EdgeInsets.symmetric(horizontal: 10.0),
                child: Icon(values[i]));
          ));

---

      小菜还处于基础学习阶段，有很多问题待研究；如有错误请多多指导！