Flutter基础篇---弹窗Dialog

在Flutter中，Dialog是一种特殊的模态对话框，通常用于在需要用户进行一些简单操作（比如选择、确认或提供反馈）时弹出来。在本文中，我们将学习如何使用Flutter中的Dialog组件来创建和显示弹窗。
首先，我们需要导入showDialog方法，该方法用于显示弹窗。在Flutter中，showDialog方法属于showModalBottomSheet、showDialog、showCupertinoModalPopup等几个方法之一，具体使用哪个方法取决于我们想要的弹窗类型。
下面是一个简单的示例，演示如何使用showDialog方法来创建一个简单的弹窗：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Dialog Demo'),
),
body: Center(
child: MyButton(),
),
),
);
}
}
class MyButton extends StatefulWidget {
@override
_MyButtonState createState() => _MyButtonState();
}
class _MyButtonState extends State<MyButton> {
@override
Widget build(BuildContext context) {
return RaisedButton(
child: Text('Show Dialog'),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Title'),
content: Text('This is a simple dialog message.'),
actions: <Widget>[
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
FlatButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
);
}
}

在上面的示例中，我们首先导入了必要的库。然后创建了一个简单的Flutter应用程序，其中包含一个按钮，当用户点击该按钮时，将显示一个包含标题、内容和两个按钮的弹窗。通过调用showDialog方法并传递一个AlertDialog实例作为参数，我们可以创建一个自定义的弹窗。在AlertDialog中，我们指定了弹窗的标题、内容和两个按钮。最后，我们使用Navigator.of(context).pop()来关闭弹窗。