Dialog 在现代的视觉交互中是很常用的一种 UI。
做移动端开发的同学一定对它不陌生。
本篇将会探索一下,在 Flutter 中如何构建一个 Dialog UI。
1.如何展示一个Dialog?
1.导入 material 插件'package:flutter/material.dart'
复制代码
2.调用 showDialog() 来展示一个 DialogFuture 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,
<