Flutter 警告对话框

17 Mar 2025 | 6 分钟阅读

警告对话框是一个有用的功能，它通知用户重要信息，以便做出决定或提供选择特定操作或操作列表的能力。它是一个弹出框，显示在应用程序内容顶部和屏幕中间。用户可以在恢复与应用程序的交互之前手动关闭它。

可以将警告视为一个浮动模态，它应用于快速响应，例如密码验证、小型应用程序通知等等。警告非常灵活，可以非常轻松地自定义。

在 Flutter 中，AlertDialog 是一个小部件，用于通知用户需要确认的情况。 Flutter 警告对话框包含一个可选的标题，该标题显示在内容上方，以及显示在内容下方的操作列表。

Alert Dialog 的属性

AlertDialog 小部件的主要属性是

标题：此属性为 AlertDialog 框提供标题，该标题位于 AlertDialog 的顶部。最好将标题保持尽可能短，以便用户可以非常轻松地了解其用途。我们可以在 AlertDialog 中编写标题，如下所示

操作：它显示在内容下方。例如，如果需要创建一个按钮来选择是或否，则仅在操作属性中定义。我们可以在 AlertDialog 中编写操作属性，如下所示

actions: <Widget>[
    FlatButton(child: Text("Yes"),),
    FlatButton(child: Text("No"),)
],)

内容：此属性定义 AlertDialog 小部件的主体。它是一种文本类型，但它也可以包含任何类型的布局小部件。我们可以在 AlertDialog 中使用 Content 属性，如下所示

actions: <Widget>[
    FlatButton(child: Text("Yes"),),
    FlatButton(child: Text("No"),)
],)
content: Text("It is the body of the alert Dialog"),

内容填充：它为 AlertDialog 小部件中的内容提供所需的填充。我们可以在 AlertDialog 中使用 ContentPadding 属性，如下所示

形状：此属性为警告对话框提供形状，例如曲线、圆形或任何其他不同的形状。

shape: CircleBorder(),
shape: CurveBorder(),

我们可以将警告对话框分为多种类型，如下所示

基本 AlertDialog
确认 AlertDialog
选择 AlertDialog
文本字段 AlertDialog

基本 AlertDialog

此警报通知用户有关新信息，例如应用程序的更改、有关新功能的信息、需要确认的紧急情况，或者作为对用户操作成功与否的确认通知。以下示例解释了基本警报的用法。

示例

在 Android Studio 中创建一个 Flutter 项目，并将以下代码替换为 main.dart 文件。要显示警报，您必须调用 showDialog() 函数，该函数包含上下文和 itemBuilder 函数。 itemBuilder 函数返回类型为 dialog 的 object，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) {
  // Create button
  Widget okButton = FlatButton(
    child: Text("OK"),
    onPressed: () {
      Navigator.of(context).pop();
    },
  );

  // Create AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("Simple Alert"),
    content: Text("This is an alert message."),
    actions: [
      okButton,
    ],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

输出

现在，运行该应用程序，它将给出以下输出。当您单击“显示警报”按钮时，您将收到警报消息。

文本字段 AlertDialog

此 AlertDialog 使其能够接受用户输入。在以下示例中，我们将在警报对话框中添加文本字段输入。打开 main.dart 文件并插入以下代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @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),
        ),
      ),
    );
  }
}

输出

现在，运行该应用程序，它将给出以下输出。当您单击“显示警报”按钮时，您将收到文本输入警报消息。

确认 AlertDialog

确认警报对话框通知用户在应用程序中继续操作之前确认特定选择。例如，当用户想要从通讯录中删除或移除联系人时。

示例

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: Text("Confirmation AlertDialog"),
      ),
      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, // user must tap button for close dialog!
    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);
            },
          )
        ],
      );
    },
  );
}

输出

当您运行该应用程序时，它将给出以下输出。现在，单击“显示警报”按钮，您将收到确认警报框消息。

选择选项 AlertDialog

这种类型的警报对话框显示项目列表，这些项目在被选中时会立即执行操作。

示例

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @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'),
            ),
          ],
        );
      });
}

输出

当您运行该应用程序时，它将给出以下输出。现在，单击“显示警报”按钮，您将收到选择选项警报框消息。选择任何可用选项后，警报消息就会消失，您将在控制台中收到所选选项的消息。

下一主题Flutter 图标

← 上一个下一个 →

Flutter 警告对话框

Alert Dialog 的属性

基本 AlertDialog

文本字段 AlertDialog

确认 AlertDialog

选择选项 AlertDialog

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 警告对话框

Alert Dialog 的属性

基本 AlertDialog

文本字段 AlertDialog

确认 AlertDialog

选择选项 AlertDialog

相关帖子

Flutter Toast

Flutter 表格

Flutter GridView

Flutter Stack

Flutter 图表

Flutter 滑块

Flutter 按钮

Flutter 单选按钮

Flutter 文本字段

Flutter 日历

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器