在Flutter中,AlertDialog是一个小部件,可将需要确认的情况通知用户。 Flutter Alert对话框包含一个可选标题,该标题显示在内容上方,而操作显示在内容下方。
AlertDialog小部件的主要属性是:
Title - 此属性将标题赋予AlertDialog对话框,该对话框位于AlertDialog的顶部。标题越短越好,这样用户就可以很容易地了解其用法。
AlertDialog(title: Text("Sample Alert Dialog"),
Action - 它显示在内容下方。例如,如果需要创建一个按钮来选择“yes”或“no”,则仅在action属性中定义它。
actions: <Widget>[ FlatButton(child: Text("Yes"),), FlatButton(child: Text("No"),) ],)
Content - 此属性定义AlertDialog小部件的主体。它是一种文本,但是也可以容纳任何类型的布局小部件。无涯教程可以在AlertDialog中使用Content属性,如下所示:
actions: <Widget>[ FlatButton(child: Text("Yes"),), FlatButton(child: Text("No"),) ],) content: Text("It is the body of the alert Dialog"),
ContentPadding - 它为AlertDialog小部件内的内容提供了所需的填充。无涯教程可以在AlertDialog中使用ContentPadding属性,如下所示:
contentPadding: EdgeInsets.all(32.0),
Shape - 此属性将形状提供给警报对话框,例如曲线,圆形或其他任何不同的形状。
shape: CircleBorder(), shape: CurveBorder(),
无涯教程可以将警报对话框分为多种类型,如下所示:
AlertDialog会通知用户有关新信息的信息,例如应用程序的更改,有关新函数的信息,需要确认的紧急情况。
示例 - 在Android Studio中创建Flutter项目,并将以下代码替换为main.dart文件。要显示AlertDialog,您必须调用showDialog()函数,该函数包含上下文和itemBuilder函数。 itemBuilder函数返回一个对话框类型的对象AlertDialog。
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final appTitle = 'Flutter Basic Alert Demo'; return MaterialApp( title: appTitle, home: Scaffold( appBar: AppBar( title: Text(appTitle), ), body: MyAlert(), ), ); } } class MyAlert extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(20.0), child: RaisedButton( child: Text('Show alert'), onPressed: () { showAlertDialog(context); }, ), ); } } showAlertDialog(BuildContext context) { //创建按钮 Widget okButton = FlatButton( child: Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ); //创建警报对话框 AlertDialog alert = AlertDialog( title: Text("Simple Alert"), content: Text("This is an alert message."), actions: [ okButton, ], ); //显示对话框 showDialog( context: context, builder: (BuildContext context) { return alert; }, ); }
现在,运行应用程序,它将提供以下输出。单击按钮显示AlertDialog时,您将获得AlertDialog消息。
该AlertDialog使其能够接受用户输入。在以下示例中,无涯教程将在AlertDialog中添加文本字段输入。打开main.dart文件,然后插入以下代码。
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { //这个小部件是您的应用程序的根。 @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Alert Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), //home: MyHomePage(title: 'Flutter Demo Home Page'), home: TextFieldAlertDialog(), ); } } class TextFieldAlertDialog extends StatelessWidget { TextEditingController _textFieldController = TextEditingController(); _displayDialog(BuildContext context) async { return showDialog( context: context, builder: (context) { return AlertDialog( title: Text('TextField AlertDemo'), content: TextField( controller: _textFieldController, decoration: InputDecoration(hintText: "TextField in Dialog"), ), actions: <Widget>[ new FlatButton( child: new Text('SUBMIT'), onPressed: () { Navigator.of(context).pop(); }, ) ], ); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TextField AlertDialog. Demo'), ), body: Center( child: FlatButton( child: Text( 'Show Alert', style: TextStyle(fontSize: 20.0),), padding: EdgeInsets.fromLTRB(20.0,12.0,20.0,12.0), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0) ), color: Colors.green, onPressed: () => _displayDialog(context), ), ), ); } }
现在,运行应用程序,它将提供以下输出。单击Show Alert时,您将获得文本输入警报消息。
Confirmation AlertDialog通知用户在前进到应用程序之前确认特定选择。
import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(home: new MyApp())); } class MyApp extends StatelessWidget { //这个小部件是您的应用程序的根。 @override Widget build(BuildContext context) { //TODO: implement build return new Scaffold( appBar: AppBar( title: Text("ConfirmAlertDialog."), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new RaisedButton( onPressed: () async { final ConfirmAction action = await _asyncConfirmDialog(context); print("Confirm Action $action" ); }, child: const Text( "Show Alert", style: TextStyle(fontSize: 20.0),), padding: EdgeInsets.fromLTRB(30.0,10.0,30.0,10.0), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0) ), color: Colors.green, ), ], ), ), ); } } enum ConfirmAction { Cancel, Accept} Future<ConfirmAction> _asyncConfirmDialog(BuildContext context) async { return showDialog<ConfirmAction>( context: context, barrierDismissible: false,//用户必须点击按钮关闭对话框! builder: (BuildContext context) { return AlertDialog( title: Text('Delete This Contact?'), content: const Text( 'This will delete the contact from your device.'), actions: <Widget>[ FlatButton( child: const Text('Cancel'), onPressed: () { Navigator.of(context).pop(ConfirmAction.Cancel); }, ), FlatButton( child: const Text('Delete'), onPressed: () { Navigator.of(context).pop(ConfirmAction.Accept); }, ) ], ); }, ); }
运行应用程序时,它将提供以下输出。现在,单击按钮Show Alert,您将获得确认警报框消息。
这种类型的警报对话框显示项目列表,选中后将立即采取措施。
示例
import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(home: new MyApp())); } class MyApp extends StatelessWidget { //这个小部件是您的应用程序的根。 @override Widget build(BuildContext context) { //TODO: implement build return new Scaffold( appBar: AppBar( title: Text("Select Option AlertDialog."), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new RaisedButton( onPressed: () async { final Product prodName = await _asyncSimpleDialog(context); print("Selected Product is $prodName"); }, child: const Text( "Show Alert", style: TextStyle(fontSize: 20.0),), padding: EdgeInsets.fromLTRB(30.0,10.0,30.0,10.0), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0) ), color: Colors.green, ), ], ), ), ); } } enum Product { Apple, Samsung, Oppo, Redmi } Future<Product> _asyncSimpleDialog(BuildContext context) async { return await showDialog<Product>( context: context, barrierDismissible: true, builder: (BuildContext context) { return SimpleDialog( title: const Text('Select Product '), children: <Widget>[ SimpleDialogOption( onPressed: () { Navigator.pop(context, Product.Apple); }, child: const Text('Apple'), ), SimpleDialogOption( onPressed: () { Navigator.pop(context, Product.Samsung); }, child: const Text('Samsung'), ), SimpleDialogOption( onPressed: () { Navigator.pop(context, Product.Oppo); }, child: const Text('Oppo'), ), SimpleDialogOption( onPressed: () { Navigator.pop(context, Product.Redmi); }, child: const Text('Redmi'), ), ], ); }); }
运行应用程序时,它将提供以下输出。现在,单击按钮Show Alert,您将获得"Select"选项警报框消息。只要选择任何可用选项,警报消息就会消失,并且您将在控制台中获取所选选项的消息。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)