Flutter - AlertDialog

Flutter - AlertDialog 首页 / Flutter入门教程 / Flutter - AlertDialog

在Flutter中,AlertDialog是一个小部件,可将需要确认的情况通知用户。 Flutter Alert对话框包含一个可选标题,该标题显示在内容上方,而操作显示在内容下方。

AlertDialog属性

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(),

无涯教程可以将警报对话框分为多种类型,如下所示:

  1. Basic AlertDialog
  2. Confirmation AlertDialog
  3. Select AlertDialog
  4. TextField AlertDialog

Basic AlertDialog

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消息。

Flutter Alert DialogsFlutter Alert Dialogs

TextField 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时,您将获得文本输入警报消息。

Flutter Alert DialogsFlutter Alert Dialogs

Confirmation AlertDialog

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,您将获得确认警报框消息。

Flutter Alert DialogsFlutter Alert Dialogs

Select Option 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("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"选项警报框消息。只要选择任何可用选项,警报消息就会消失,并且您将在控制台中获取所选选项的消息。

Flutter Alert DialogsFlutter Alert Dialogs

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

透视HTTP协议 -〔罗剑锋(Chrono)〕

接口测试入门课 -〔陈磊〕

NLP实战高手课 -〔王然〕

容量保障核心技术与实战 -〔吴骏龙〕

说透5G -〔杨四昌〕

反爬虫兵法演绎20讲 -〔DS Hunter〕

遗留系统现代化实战 -〔姚琪琳〕

中间件核心技术与实战 -〔丁威〕

高并发系统实战课 -〔徐长龙〕

好记忆不如烂笔头。留下您的足迹吧 :)