简介
根据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()做得确实不错，不愧是良心的插件。只是默认样式太过简陋，定制化的内容又太多，用起来不是非常方便。
