【Flutter组件】Dialog使用说明
Dialog相关说明
对话框本质上是属于一个路由的页面route，由Navigator进行管理，所以控制对话框的显示和隐藏，也是调用Navigator.of(context)的push和pop方法。
在Flutter中，对话框会有两种风格，调用showDialog()方法展示的是material风格的对话框，调用showCupertinoDialog()方法展示的是ios风格的对话框。 而这两个方法其实都会去调用showGeneralDialog()方法，可以从源码中看到最后是利用Navigator.of(context, rootNavigator: true).push()一个页面。
基本要传的参数:
context：上下文builder：用于创建显示的widget，barrierDismissible可以控制点击对话框以外的区域是否隐藏对话框
你会注意到，showDialog()方法返回的是一个Future对象,可以通过这个future对象来获取对话框所传递的数据。 比如我们想知道用户是点击了对话框的确认按钮还是取消按钮，那就在退出对话框的时候，利用Navigator.of(context).pop("一些数据");
Future<T> showCupertinoDialog<T>({
@required BuildContext context,
@required WidgetBuilder builder,
});
Future<T> showDialog<T>({
@required BuildContext context,
bool barrierDismissible = true,
WidgetBuilder builder,
})
Future<T> showGeneralDialog<T>({
@required BuildContext context,
@required RoutePageBuilder pageBuilder,
bool barrierDismissible,
String barrierLabel,
Color barrierColor,
Duration transitionDuration,
RouteTransitionsBuilder transitionBuilder,
}) {
assert(pageBuilder != null);
assert(!barrierDismissible || barrierLabel != null);
return Navigator.of(context, rootNavigator: true).push<T>(_DialogRoute<T>(
pageBuilder: pageBuilder,
barrierDismissible: barrierDismissible,
barrierLabel: barrierLabel,
barrierColor: barrierColor,
transitionDuration: transitionDuration,
transitionBuilder: transitionBuilder,
));
}
AlertDialog和SimpleDialog
- AlertDialog
_alertDialog() async {
var alertDialogs = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text("提示"),
content: const Text("确定要删除吗？"),
actions: <Widget>[
TextButton(onPressed: () {
Navigator.pop(context, "Cancel");
},
child: const Text("取消")),
TextButton(onPressed: () => Navigator.pop(context, "Yes"),
child: const Text("确定")),
],
);
});
return alertDialogs;
}
- SimpleDialog
_simpleDialog() async{
var simpleDialog = await showDialog(
context: context,
builder: (context){
return SimpleDialog(
title: Text("提示"),
children: [
TextButton(onPressed: (){
Navigator.pop(context);
}, child: const Text("Option1")),
TextButton(onPressed: (){
Navigator.pop(context);
}, child: const Text("Option2")),
TextButton(onPressed: (){
Navigator.pop(context);
}, child: const Text("Option3"))
],
);
});
return simpleDialog;
}
showModalBottomSheet
_modalButtomSheet() async{
showModalBottomSheet(
context: context,
builder: (context){
return Container(
height: 200,
child: Column(
children: [
ListTile(
leading: const Icon(Icons.settings),
title: const Text("设置"),
onTap: ()=>Navigator.pop(context),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text("主页"),
onTap: ()=>Navigator.pop(context),
),
ListTile(
leading: const Icon(Icons.message),
title: const Text("信息"),
onTap: ()=>Navigator.pop(context),
),
],
),
);
});
}
自定义dialog
class CommonDialog extends Dialog {
......
static const String MODULE_FOUR = "module_four";
String? content;
GestureTapCallback? confirm;
GestureTapCancelCallback? cancel;
String type = MODULE_ONE;
String? subContent;
String? imageUrl;
CommonDialog({
this.content,
this.confirm,
this.cancel,
this.subContent,
this.imageUrl,
required this.type,
});
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: Container(
width: 0.8.sw,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8.w))),
child: _getModuleByType(type, context),
),
),
type: MaterialType.transparency,
);
}
Widget _getModuleByType(String type, BuildContext context) {
switch (type) {
case MODULE_ONE:
return _dialogModuleOne(context);
case MODULE_TWO:
return _dialogModuleTwo(context);
case MODULE_THREE:
return _dialogModuleThree(context);
case MODULE_FOUR:
return _dialogModuleFour(context);
}
return _dialogModuleOne(context);
}
/// -------------------------------
/// ｜ 关闭按钮 ｜
/// ｜ ｜
/// ｜ 主文本：关注公众号/添加微信 ｜
/// ｜ 副文本：xxx ｜
/// ｜ ｜
/// ｜ 图片：二维码
/// ｜
/// ｜
/// ｜ 文本：步骤提示文本 ｜
/// --------------------------------
Widget _dialogModuleFour(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: [
Positioned(
bottom: 0.w,
left: 0.w,
child: Image.asset(
"assets/dialog_qrcode_bg.webp",
width: 178.w,
height: 178.w,
)),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Align(
//关闭按钮
alignment: Alignment.topRight,
child: IconButton(
iconSize: 24.w,
icon: Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
this.cancel?.call();
},
),
),
Padding(
//主标题
padding: EdgeInsets.only(left: 24.w, right: 24.w),
child: Text(
"$content",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.w, fontWeight: FontWeight.bold),
),
),
Padding(
//副文本
padding: EdgeInsets.only(left: 24.w, right: 24.w),
child: Text(
"$subContent",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 14.w, color: CMColors.color_808080),
),
),
Padding(
//二维码区
padding: EdgeInsets.only(top: 24.w, left: 24.w, right: 24.w),
child: Container(
height: 200.w,
width: 200.w,
alignment: Alignment.center,
child: Image.network(
"$imageUrl",
width: 168.w,
height: 168.w,
fit: BoxFit.cover,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(24.w)),
boxShadow: [
BoxShadow(
color: CMColors.color_80d7dae0, blurRadius: 15.w)
]),
),
),
Padding(
padding: EdgeInsets.only(
left: 24.w, top: 16.w, right: 24.w, bottom: 24.w),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"第一步：截图二维码，保存到相册",
style: TextStyle(
color: CMColors.color_EB4534,
fontSize: 14.w,
),
),
Text(
"第二步：打开微信“扫一扫”",
style: TextStyle(
color: CMColors.color_EB4534,
fontSize: 14.w,
),
)
],
),
)
],
)
],
);
}
}
调用：
showDialog(
context: context,
builder: (context) {
return CommonDialog(
type: CommonDialog.MODULE_FOUR,
content: "添加专属顾问二维码",
subContent: "提前了解上课信息",
imageUrl: "https://scpic.chinaz.net/files/pic/pic9/202004/zzpic24187.jpg",
confirm: (){
Fluttertoast.showToast(msg: "你同意了权限请求");
},
cancel: (){
Fluttertoast.showToast(msg: "你不同意了权限请求");
},
);
});
