前言
本文介绍 Flutter 常用对话框 Widget，主要有三个 SimpleDialog、AlertDialog 和 CupertinoAlertDialog，和底部弹出来的对话框 BottomSheet。
一、常用的对话框 Widget
在详细介绍对话框之前，我们先看一下显示对话框的两种方法：
- showAboutDialog()
- showDialog()
（1）showAboutDialog()：用来弹关于对话框
代码：
import 'package:flutter/material.dart';
class ShowAboutDialogWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ShowAboutDialog',
theme: ThemeData(primaryColor: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: Text('对话框'),
),
body: Builder(
builder: (context) => RaisedButton(
onPressed: () {
showAboutDialog(
context: context,
applicationName: 'ShowAboutDialog',
applicationVersion: '1.0.0');
},
child: Text('ShowAboutDialog'),
)),
),
);
}
}
运行结果：
showAboutDialog 构造函数及参数：
void showAboutDialog({
@required BuildContext context, //必选，类型 BuildContext，应用上下文
String applicationName, //可选，类型 String，应用的名字
String applicationVersion, //可选，类型 String，应用的版本
Widget applicationIcon, //可选，类型 Widget，应用的icon
String applicationLegalese, //可选，类型 String，应用的法律信息
List children, //可选，类型 List，添加在后面的 Widget
}) {
...
}
（2）showDialog()：可以弹很多不同种类的 Dialog。
showDialog() 构造函数及参数说明：
Future showDialog({
@required BuildContext context, // 必选，类型 BuildContext，应用上下文
bool barrierDismissible = true, // 可选，类型 bool，点击背景是否可以关闭 dialog。默认为 true，可以关闭
@Deprecated(
'Instead of using the "child" argument, return the child from a closure '
'provided to the "builder" argument. This will ensure that the BuildContext '
'is appropriate for widgets built in the dialog.'
) Widget child, // 可选，类型 Widget，要显示的 Widget，这个已经废弃了，请使用 builder
WidgetBuilder builder, // 可选，类型 WidgetBuilder，创建要显示的 Widget
}) {
···
}
showDialog()的使用方法：
Builder(
builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(context: context,builder: (context) => xxxDialog(...));
},
child: Text('showDialog'),
);
},
)
其中 xxxDialog 就是下面我们要介绍的常用Dialog.
1. SimpleDialog
- 作用：显示有一个标题和多个选项的简单对话框。
- 代码示例：
import 'package:flutter/material.dart';
class ShowSimpleDialogWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Dialog',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Dialog'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => SimpleDialog(
title: Text('SimpleDialog Demo'),//对话框标题内容
children: [
SimpleDialogOption(//选项按钮
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();//关闭对话框
},
),
SimpleDialogOption(
child: Text('Cancle'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
},
child: Text('showDialog'),//主页面按钮文本内容
);
}),
),
);
}
}
import 'package:flutter/material.dart';
import 'ShowSimpleDialogWidget.dart';
void main() => runApp(ShowSimpleDialogWidget());
- 运行结果：
- SimpleDialog 构造函数及参数说明：
class SimpleDialog extends StatelessWidget {
const SimpleDialog({
Key key, // 可选；类型 Key；Widget 的标识
this.title, // 可选；类型 Key；对话框的标题，通常是Text
this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),// 可选；类型 EdgeInsetsGeometry；标题的边距
this.children, // 可选；类型 List；对话框的按钮，显示在对话框标题的下面，通常是一组 SimpleDialogOption
this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0), // 可选；类型 EdgeInsetsGeometry；内容的边距
this.backgroundColor, // 可选；类型 Color；对话框的背景
this.elevation, // 可选；类型 double；Button 相对于其父布局放置的z坐标，这可以控制 Button 下的阴影大小，该值必须>=0
this.semanticLabel, // 可选；类型 String；给文本加上一个语义标签，用于盲人辅助模式下
this.shape, // 可选；类型 ShapeBorder；Widget 的形状
}) : assert(titlePadding != null),
assert(contentPadding != null),
super(key: key);
...
}
- SimpleDialogOption 的构造函数及参数说明
class SimpleDialogOption extends StatelessWidget {
const SimpleDialogOption({
Key key, // 可选；类型 Key；Widget 的标识
this.onPressed, // 可选；类型 VoidCallback；点击事件，当手指松开时才触发
this.child, // 可选；类型 Widget；显示的内容，一般是 Text
}) : super(key: key);
...
}
2. AlertDialog
- 作用：警告对话框
- 代码示例：
import 'package:flutter/material.dart';
class AlertDialogWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'AlertDialog',
home: new Scaffold(
appBar: new AppBar(
title: new Text('AlertDialog'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('AlertDialog'),
content: SingleChildScrollView(
child: ListBody(
children: [
Text('Alert Dialog Title'),
Text('Alert Dialog context'),
],
),
),
actions: [
FlatButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
},
child: Text('showAlertDialog'),
);
}),
),
);
}
}
- 运行结果：
3. CupertinoAlertDialog
- 作用：iOS 风格的 AlertDialog
- 示例代码：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ShowCupertinoAlertDialogWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'CupertinoAlertDialog',
home: new Scaffold(
appBar: new AppBar(
title: new Text('CupertinoAlertDialog'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => CupertinoAlertDialog(
title: Text('CupertinoAlertDialog'),
content: Text('This is a CupertinoAlertDialog'),
actions: [
CupertinoDialogAction(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
},
child: Text('showDialog'),
);
}),
),
);
}
}
- 运行结果：
二、底部弹出的对话框 BottomSheet
- PersistentBottomSheet
- ModalBottomSheet
1. PersistentBottomSheet
- 介绍：持续的底部对话框。当 BottomSheet 弹出时，会一直覆盖在 APP 的界面上，而且背景是透明的，所以你还是可以和界面有其他交互，点击背景不能消失，只有返回才会消失。
- 使用：可以用 Scaffold 的 showBottomSheet() 方法，也可以设置 Scaffold 的 bottomSheet 参数。
- 代码示例
（1） showBottomSheet()
import 'package:flutter/material.dart';
class ShowPersistentBottomSheetWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ShowPersistentBottomSheetWidget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('ShowPersistentBottomSheetWidget'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showBottomSheet(
context: context,
builder: (context) => BottomSheet(
onClosing: () {},
builder: (context) => Container(
height: 200.0,
color: Colors.blue,
child: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('dismissBottomSheet'),
),
),
),
));
},
child: Text('showBottomDialog'),
);
}),
));
}
}
（2）Scaffold 的 bottomSheet 参数
直接给 Scaffold 的 bottomSheet 参数赋 BottomSheet 的实例，这样 Scaffold 一创建的时候就会显示 BottomSheet。
import 'package:flutter/material.dart';
class PersistentBottomSheetWidgetWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'PersistentBottomSheetWidgetWidget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('PersistentBottomSheetWidgetWidget'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {},
child: Text('showBottomSheet'),
);
}),
bottomSheet: BottomSheet(
onClosing: () {},
builder: (context) => Container(
height: 200.0,
color: Colors.blue,
child: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('dismissBottomSheet'),
),
),
)),
));
}
}
- 运行结果：
当 PersistentBottomSheet 出现时，TitleBar 的右上角会多一个返回的按钮可以关闭弹窗。
2. ModalBottomSheet
- 介绍：有半透明背景的对话框。类似 Dialog，有一个半透明的背景层，点击背景会消失。
- 使用：只能用 showModalBottomSheet()方法。
- 代码示例：
import 'package:flutter/material.dart';
class ShowModalBottomSheetWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ShowModalBottomSheetWidget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('ShowModalBottomSheetWidget'),
),
body: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => BottomSheet(
onClosing: () {},
builder: (context) => Container(
height: 200.0,
color: Colors.blue,
child: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('dismissBottomSheet'),
),
),
),
));
},
child: Text('showBottomSheet'),
);
}),
),
);
}
}
- 运行结果：
showModalBottomSheet() 方法的定义和参数说明：
Future showModalBottomSheet({
@required BuildContext context, // 必选；类型 BuildContext；应用上下文
@required WidgetBuilder builder,// 必选；类型 WidgetBuilder；要显示的 BottomSheet
}) {
...
}