Flutter对话框封装实践 2022-11-05 周六

2022-11-05 本文已影响0人勇往直前888

对话框实现方式选择

方案1：Flutter系统提供的对话框，可用，但是实在难用，效果也不好，基本不选。
方案2：GetX的对话框，常用，但是布局要自己写，适合自定义。
方案3：比如Alert，text input，action sheet等等，这些是常用的，都要自定义，也麻烦，所以最好能找个第三方插件。

插件对比

在pub.dev中输入关键字dialog，结果如下：

企业微信截图_baa11181-7188-4677-bf4c-c8553d0db114.png

从这里可以看到，adaptive_dialog 优势明显

进去看介绍，最常用Alert，可以看到和原生的很接近，并且iOS和Android有不同的样式，这个非常好。

企业微信截图_027235f4-f5bd-45c1-874c-6a0d76458d4e.png

继续浏览，发现一个指标更好的，但是样子却差强人意，不是很喜欢。真不知道这些指标是怎么来的。

企业微信截图_65357cb6-1606-4b6a-9c97-df494b198724.png

小结：通过比较，果断选择adaptive_dialog

安装

只需要一条命令就可以

flutter pub add adaptive_dialog

封装

插件提供的是全局函数，可以用，不过还是集中到一个类中比较合适，用类的静态方法比较好。毕竟和log是不一样的。
对话框应该归入工具一类中，放在utils目录下
插件提供的参数还是过多，平时基本上用不到，所以隐藏一些还是好的。

1. 简单的alert

用的最多的就是最简单的alert，有标题，内容，和一个ok按钮，只是展示一条信息。比toast稍微强制一点，需要用户点一下才能消失，保证信息送达。

class DialogUtil {
  /// 最简单的Alert，只有一个OK按钮
  static void alert({
    String? title = 'title',
    String? message = 'message',
    String? okLabel,
  }) {
    showOkAlertDialog(
      context: Get.context!,
      title: title,
      message: message,
      okLabel: okLabel,
      barrierDismissible: false,
    );
  }
}

因为用了GetX框架，所以context参数直接给Get.context!，方便很多。
这里的参数用了可选类型，并且提供了默认值。必要的时候可以给null，比如没有标题的情况，可以给title参数为null
插件其实还提供了很多参数，感觉都没有必要，所以这里都隐藏了。但是barrierDismissible: false, 这样要求点击ok按钮才能退出，更符合iOS原生的习惯。
是否点了ok按钮没有必要知道，所以这里Future类型的返回值也不要了，直接给了void

企业微信截图_971d6791-05d8-48f9-85da-2560024e1528.png

内容过长的话，会有滑动框，适应性很好。文本对齐方式固定为居中，文本大小，文本样式都不能调整，有点遗憾。

企业微信截图_9784ebb2-64d6-4796-93be-77d59f7d03ec.png

带cancel的alert

一般有OK和cancel两个按钮

/// Alert，有OK和cancel两个按钮
  static Future<OkCancelResult> alertWithCancel({
    String? title = 'title',
    String? message = 'message',
    String? okLabel,
    String? cancelLabel,
  }) {
    return showOkCancelAlertDialog(
      context: Get.context!,
      title: title,
      message: message,
      okLabel: okLabel,
      cancelLabel: cancelLabel,
      barrierDismissible: false,
    );
  }

用户点了那个按钮，通过返回值获得；
OK按钮变红色，使用场景较少，参数不提出。危险操作用另外的action sheet表示更合适。
当然，如果确实有需求，可以到时候再开放这个参数bool isDestructiveAction = false,(给true就是红色的OK按钮)

企业微信截图_5af444bd-1b9a-46a7-abed-88bb20e459e4.png

action sheet单选

做iOS的特别有感觉，很怀念action sheet，感觉是真的好。

/// action sheet 单选
  static Future actionSheet({
    String? title = 'title',
    String? message,
    String? cancelLabel,
    List<SheetAction> actions = const [],
  }) {
    return showModalActionSheet(
      context: Get.context!,
      title: title,
      message: message,
      actions: actions,
    );
  }

选项采用SheetAction类型。用法看属性名字就可以了。泛型T不是很好用，简单理解为dynamic就行。

class SheetAction<T> {
  const SheetAction({
    required this.label,
    this.key,
    this.icon,
    this.isDefaultAction = false,
    this.isDestructiveAction = false,
  });

  final String label;

  /// Only works for Material Style
  final IconData? icon;

  /// Used for checking selection result
  final T? key;

  /// Make font weight to bold(Only works for CupertinoStyle).
  final bool isDefaultAction;

  /// Make font color to destructive/error color(red).
  final bool isDestructiveAction;
}

使用的时候，返回的是SheetAction中的key字段，这个字段是dynamic的，很灵活。这个设计很不错。

    var result = await DialogUtil.actionSheet(
      actions: [
        SheetAction(label: 'label1', key: 1),
        SheetAction(label: 'label2', key: 'temp'),
        SheetAction(label: 'label3', key: {'key': 'value3'})
      ],
    );
    log(result);

企业微信截图_93cf37c5-fdf2-44db-889c-5420e4b73853.png

企业微信截图_5a4d62bb-f8db-4e47-a8c2-61a73aaba411.png

单个输入框

弹窗输入一串字符，这种场景还是很普遍的。
所以提供一个TextField（可以配置为多行输入）的弹出框还是很有必要的。

  /// 文本输入，仅限一个
  static Future<String> textInput({
    String? title = 'title',
    String? message,
    String? okLabel,
    String? cancelLabel,
    String? hintText = 'Please input',
    int maxLines = 1,
    int? maxLength,
    TextInputType? keyboardType,
    
  }) async {
    var resultList = await showTextInputDialog(
      context: Get.context!,
      title: title,
      message: message,
      okLabel: okLabel,
      cancelLabel: cancelLabel,
      textFields: [
        DialogTextField(
          hintText: hintText,
          keyboardType: keyboardType,
          maxLines: maxLines,
          maxLength: maxLength,
        )
      ],
      barrierDismissible: false,
    );
    if (resultList == null) {
      return '';
    }
    if (resultList.isEmpty) {
      return '';
    }
    return resultList.first;
  }

虽然只有一个TextField，但是可以配置为多行输入

    var result = await DialogUtil.textInput(
      maxLines: 5,
    );
    log(result);

企业微信截图_9e4f5afa-8477-4f5a-989e-5be868d24b4c.png

企业微信截图_230179a6-fff9-4667-bb22-98cc4e53a87c.png

点cancel的话，返回值是空字符串，去掉了null这种情况，使用的时候可以少判断一次。

其他封装

showTextAnswerDialog使用场景不多，暂时不封装
超过2个按钮的alert，可以封装showAlertDialog，这个场景有，但是不多。
等遇到了再封装，也可以直接使用showAlertDialog
对于多个的TextField，遇到的概率也不高，暂时不封装。也可以直接使用插件的showTextInputDialog

小结

这个可以当做默认的alert，action sheet，和单行文本输入方式。
如果要自定义样式，还是封装GetX的dialog和bottom sheet比较好