目录传送门：《Flutter快速上手指南》先导篇
Dialog 在现代的视觉交互中是很常用的一种 UI。
做移动端开发的同学一定对它不陌生。
本篇将会探索一下，在 Flutter 中如何构建一个 Dialog UI。
1.如何展示一个Dialog？
1.导入 material 插件
'package:flutter/material.dart'
复制代码2.调用 showDialog() 来展示一个 Dialog
Future showDialog({
@required BuildContext context,
// 点击 dialog 外部是否可消失
bool barrierDismissible = true,
// 构建 Dialog 视图
WidgetBuilder builder,
})
复制代码 没错，只需要调用这个简单的函数就可以展示一个 Dialog。
重点是，在 builder 中构建你的 Dialog 视图。
这是一个简单的例子：
showDialog(
// 传入 context
context: context,
// 构建 Dialog 的视图
builder: (_) => Padding(
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
alignment: Alignment.center,
color: Colors.white,
child: Column(
children: [
Padding(
padding: EdgeInsets.only(top: 8),
child: Text('Custom Dialog',
style: TextStyle(
fontSize: 16,
decoration: TextDecoration.none)),
),
Padding(
padding: EdgeInsets.only(top: 15, bottom: 8),
child: FlatButton(
onPressed: () {
// 关闭 Dialog
Navigator.pop(_);
},
child: Text('确定')),
)
],
),
)
],
),
),
);
复制代码 看看效果：
其实和平时构建一个页面没多大区别，只不过是在 showDialog() 的 builder 中构建。
如果你注意细节的话，你会发现上面代码中有一行：
Navigator.pop(_);
复制代码它就是用来关闭 Dialog 的操作。
还记得 Navigator 吗？
它是用来进行页面跳转的，也许你可以看看 《8.页面跳转》 来回顾回顾。
这意味着，弹出一个 Dialog，实际上就是打开了一个 Dialog 风格的页面！！?
跟踪源码会发现，在 showDialog() 的最后实现中，实际是这样的：
Navigator.of(context, rootNavigator: true).push(_DialogRoute(
pageBuilder: pageBuilder,
barrierDismissible: barrierDismissible,
barrierLabel: barrierLabel,
barrierColor: barrierColor,
transitionDuration: transitionDuration,
transitionBuilder: transitionBuilder,
))
复制代码 ? 可不就是打开了一个页面嘛..
2.常用 Dialog
Flutter 当然会提供一些 Dialog 的封装，帮助开发者快速的构建常用的 Dialog。
2.1 SimpleDialog
先看看 SimpleDialog 有些什么常用参数：
| 属性 | 类型 | 说明 |
|---|---|---|
| title | Widget | Dialog的标题 |
| titlePadding | EdgeInsetsGeometry | title周围的 Padding |
| children | List | child内容数组，会从上到下的排列 child |
| contentPadding | EdgeInsetsGeometry | 内容区域周围的 Padding |
| backgroundColor | Color | Dialog的背景色 |
| elevation | double | Dialog 的悬浮高度，和阴影效果有关 |
| shape | ShapeBorder | Dialog的边框形状 |
? e.g.：
showDialog(
context: context,
builder: (ctx) {
return SimpleDialog(
title: Text("SimpleDialog"),
titlePadding: EdgeInsets.all(10),
backgroundColor: Colors.amber,
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(6))),
children: [
ListTile(
title: Center(child: Text("Item_1"),),
),
ListTile(
title: Center(child: Text("Item_2"),),
),
ListTile(
title: Center(child: Text("Item_3"),),
),
ListTile(
title: Center(child: Text("Close"),),
onTap: (){
Navigator.pop(context);
},
),
],
);
});
复制代码 ? 看看是啥效果：
2.2 AlertDialog
上图中的 Dialog 样式是现在比较常用的。
Flutter 帮助我们封装了 AlertDialog 来方便的实现这种样式。
看看 AlertDialog 有哪些常用的属性：
| 属性 | 类型 | 说明 |
|---|---|---|
| title | Widget | Dialog的标题 |
| titlePadding | EdgeInsetsGeometry | title周围的 Padding |
| content | Widget | Dialog 中间的内容 |
| contentPadding | EdgeInsetsGeometry | 内容区域周围的 Padding |
| backgroundColor | Color | Dialog的背景色 |
| elevation | double | Dialog 的悬浮高度，和阴影效果有关 |
| shape | ShapeBorder | Dialog的边框形状 |
| actions | List | 通常为Dialog底部的操作按钮 |
? e.g.：
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Dialog'),
content: Text(('Dialog content..')),
actions: [
new FlatButton(
child: new Text("取消"),
onPressed: () {
Navigator.of(context).pop();
},
),
new FlatButton(
child: new Text("确定"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
));
复制代码 这就是上图中的 Dialog 的实现。
目录传送门：《Flutter快速上手指南》先导篇
如何找到我？
传送门：CoorChice 的主页
传送门：CoorChice 的 Github