Flutter对话框实践 2022-06-10 周五

2022-06-10 本文已影响0人勇往直前888

简介

根据UI设计图，我们的目标是要实现如下形式的弹窗提示。

目标弹窗样式

从设计风格看，应该是iOS风格的弹窗提示。不过Flutter基本上是用Material风格的设计组件，这个差距有点大。
Flutter的Material组件库提供的对话框没有两种平台都接受的对话框，这个很令人失望。
另外，对话框的使用还要引入context，以及路由Navigator.of(context).pop()这类的，真得令人很无语。当然，整个Flutter框架，context和Navigator都是很差劲的，这也是插件GetX如此有价值的根本原因所在。

Get.defaultDialog

既然项目中引入了GetX，那么遇到什么事当然是先求助一下这个百宝箱。关于对话框，还真有，使用也很简单。一行代码就可以Get.defaultDialog();

GetX默认对话框

虽然离设计稿很远，但是有几点还是值得赞赏的。首先，这看不出来是Android风格还是iOS风格，貌似两个平台可以公用啊。
context和Navigator两个麻烦事都没有，相对比较省心。并且，稍微看了一下Get.defaultDialog有25个参数可以用来配置呢。
经过各种参数配置，达到了如下效果：

配置了参数后的对话框

Get.defaultDialog(
      title: '注册成功',
      titleStyle: TextStyle(
        color: const Color(0xFF000000),
        fontSize: 17.sp,
      ),
      middleText: '去登录邮箱激活账号，然后登录',
      middleTextStyle: TextStyle(
        color: const Color(0xFF000000),
        fontSize: 13.sp,
      ),
      radius: 14.sp,
      textConfirm: 'OK',
      confirmTextColor: const Color(0xFF007AFF),
      backgroundColor: const Color(0xD1F8F8F8),
      buttonColor: Colors.transparent,
      onConfirm: () {
        /// 确认按钮的代码
        ///  让对话框消失需要动用路由方法
        Get.back();
      },
      barrierDismissible: false, /// 既然是Alert，iOS定义的空白处不能退出更合理
    );

通过看GetX的相关代码，发现是通过AlertDialog来实现的。

Widget baseAlertDialog = AlertDialog(
      titlePadding: titlePadding ?? const EdgeInsets.all(8),
      contentPadding: contentPadding ?? const EdgeInsets.all(8),

      backgroundColor: backgroundColor ?? theme.dialogBackgroundColor,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(radius))),
      title: Text(title, textAlign: TextAlign.center, style: titleStyle),
      content: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          content ??
              Text(middleText,
                  textAlign: TextAlign.center, style: middleTextStyle),
          const SizedBox(height: 16),
          ButtonTheme(
            minWidth: 78.0,
            height: 34.0,
            child: Wrap(
              alignment: WrapAlignment.center,
              spacing: 8,
              runSpacing: 8,
              children: actions,
            ),
          )
        ],
      ),
      // actions: actions, // ?? <Widget>[cancelButton, confirmButton],
      buttonPadding: EdgeInsets.zero,
    );

    return dialog<T>(
      onWillPop != null
          ? WillPopScope(
              onWillPop: onWillPop,
              child: baseAlertDialog,  /// 这个baseAlertDialog就是用AlertDialog来的
            )
          : baseAlertDialog,
      barrierDismissible: barrierDismissible,
      navigatorKey: navigatorKey,
    );
  }

小结：虽然离设计稿还有不小的距离，不过也算是一种Android和iOS的折中形式。如果UI可以接受，也算可以勉强使用。

对Get.defaultDialog的封装

通过上面的实验，如果对UI要求不高，并且只是自己的工程中用用，又不是通用的组件，那么就可以考虑封装一下。无论怎么说，这种Alert对话框使用的地方还是挺多的。
如果想要完美，达到设计稿的要求，那么可以学习Get.defaultDialog的做法，封装AlertDialog，进行样式定制。这是一条可行的道路，愿意多花点时间的话，鼓励去做。
只是一个弹窗提示，样式要求那么高没有必要，直接对Get.defaultDialog的封装也就可以了。只要在本工程中方便使用就可以了。虽然没什么追求，不过这未尝不是一种方法，一种懒人的方法。=== 懒人封装。
既然是“懒人封装”，那么就只要支持一个按钮或者两个按钮的情况就可以了，其他一律不考虑。

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

typedef VoidCallback = void Function();

class PandaDialog {
  static void showAlert({
    String title = 'title',
    String content = 'content',
    String textConfirm = 'OK',
    String? textCancel,
    VoidCallback? onConfirm,
    VoidCallback? onCancel,
  }) {
    Get.defaultDialog(
      title: title,
      titleStyle: TextStyle(
        color: const Color(0xFF000000),
        fontSize: 17.sp,
      ),
      middleText: content,  // 自动支持多行文本，没有必要给content Widget
      middleTextStyle: TextStyle(
        color: const Color(0xFF000000),
        fontSize: 13.sp,
      ),
      radius: 14.sp,
      textConfirm: textConfirm,
      textCancel: textCancel,
      confirmTextColor: const Color(0xFF007AFF),
      backgroundColor: const Color(0xD1F8F8F8),
      buttonColor: Colors.transparent,
      onConfirm: () {
        if (onConfirm != null) {
          onConfirm();
        }
        Get.back(); // 让OK也能自动退出
      },
      onCancel: onCancel,  // cancel是自带退出的，不需要多此一举
      barrierDismissible: false, // 既然是Alert，当然是iOS定义的空白处不能退出更合理
    );
  }
}

简单测试

Case1：默认值调用

PandaDialog.showAlert();

默认调用

Case2：只有一个按钮

    PandaDialog.showAlert(
      title: '这是标题',
      content: '这是具体的描述',
      textConfirm: '确定',
      onConfirm: () {
        debugPrint('点击了确定按钮');
      },
    );

一个按钮

Case3：两个按钮

PandaDialog.showAlert(
      title: '这是标题',
      content: '这是具体的描述',
      textConfirm: '确定',
      onConfirm: () {
        debugPrint('点击了确定按钮');
      },
      textCancel: '取消',
      onCancel: () {
        debugPrint('点击了取消按钮');
      },
    );

两个按钮

Case4：很长的内容

    PandaDialog.showAlert(
      title: '这是标题',
      content: '''
这是具体的描述。这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.
这是多行文本。
这是多行文本。
这是多行文本。
这是多行文本。
// 这里还有个注释

这是多行文本。这是多行文本。
这是多行文本。
这是多行文本。
这是多行文本。
          ''',
      textConfirm: '确定',
      onConfirm: () {
        debugPrint('点击了确定按钮');
      },
      textCancel: '取消',
      onCancel: () {
        debugPrint('点击了取消按钮');
      },
    );

很长的内容

Case5：更加丧心病狂的测试

PandaDialog.showAlert(
      title: '''很长的标题。很长的标题。很长的标题。很长的标题。很长的标题。很长的标题。
      多行的标题
      多行的标题
      多行的标题
      多行的标题
      ''',
      content: '''
这是具体的描述。这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.这是很长的描述111.
这是多行文本。
这是多行文本。
这是多行文本。
这是多行文本。
// 这里还有个注释

这是多行文本。这是多行文本。
这是多行文本。
这是多行文本。
这是多行文本。
          ''',
      textConfirm: '''很长的确定。很长的确定。很长的确定。很长的确定。很长的确定。很长的确定。
      多行的确定。
      多行的确定。
      多行的确定。

      多行的确定。
      ''',
      onConfirm: () {
        debugPrint('点击了确定按钮');
      },
      textCancel: '''很长的取消。很长的取消。很长的取消。很长的取消。很长的取消。
      多行的取消。


      多行的取消。
      多行的取消。多行的取消。
      多行的取消。
      ''',
      onCancel: () {
        debugPrint('点击了取消按钮');
      },
    );

过长的布局导致报错

测试小结

标题，内容，按钮标题，都支持长文本，多行文本，这个很不错。
内容高度局限在一屏，太长的话会导致报错。
推测应该用了wrap组件，但是没有用SingleChildScrollView。所以能够自动换行，但是当内容超出一屏的时候导致布局报错。
Get.defaultDialog()做得确实不错，不愧是良心的插件。只是默认样式太过简陋，定制化的内容又太多，用起来不是非常方便。

参考文章

Dialogs

提示窗口（AlertDialog、CupertinoAlertDialog、SimpleDialog、Dialog）

Flutter对话框实践 2022-06-10 周五

简介

Get.defaultDialog

对Get.defaultDialog的封装

简单测试

测试小结

参考文章

猜你喜欢

热点阅读