AlertDialog组件的功能与用法

概念介绍

我们介绍的AlertDialog是指程序中弹出的确认窗口，其实我们在上一章回中删除ListView中的内容时已经使用过了，只是没有介绍它的用法而已，本章回中将详细
介绍它的使用方法。

使用方法

和其它的Widget一样，AlertDialog提供了相关的属性来控制自己，接下来我们将介绍一些常用的属性：

• title属性:主要用来显示对话框的标题；
• content属性:主要用来显示对话框中的内容；
• actions属性:主要用来显示对话框中的按钮，它的类型是List，因此可以接收多个按钮，类似Column中的children属性；
  AlertDialog需要配合showDialog()方法才能使用，该方法中包含两个重要的参数，一个是上下文的环境context，一个是builder，该参数主要用来构造对话框。
  具体的用法看代码就能明白。该方法可以看作是对话框的构造器，它还可以创建其它类型的对话框。

示例代码

_showAlertDialog() {
  showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Alert Dialog"),
          content: Text("This is a Example of  AlerDialog"),
          actions: [
            TextButton(
              onPressed: () {
                print("Yes selected");
                Navigator.of(context).pop();
              },
              child: const Text("Yes"),
            ),
            TextButton(
              onPressed: () {
                print("No selected");
                Navigator.of(context).pop();
              },
              child: const Text("No"),
            ),
          ],
        );
      });
}

在上面的代码中除了对话框相关的属性外，还有一个注意点：Navigator,我们首先获取当前的Navigator，然后进行pop操作，这样就可以关闭弹出的对话框窗口。我
们把该操作放在了Button的onPress方法中，这样可以在点击Button的同时关闭窗口。除了关闭窗口外，可以在该方法中添加相关的业务处理，比如我们在上一章回中
删除项目的操作就添加到了该方法中。这里的代码只是为了演示对话框，因此没有添加相关的业务代码。代码中使用的是TextButton widget,大家也可以换成其它的
Button，不过Button的风格最好与当前对话框的风格保持一致，不然它们组合在一起会有一种不协调的感觉。
此外，我们把对话框相关的代码封装到了一个方法中，把方法赋值给Button的onPress属性，当点击Button时就会弹出对话框，示例代码如下：

ElevatedButton(
  onPressed: () => _showAlertDialog(),
  child: const Text("Show Dialog"),
)

这里只列出了核心代码，完整的代码可以查看Github上ex019文件中的代码。编译并且运行上面的程序将会显示一个按钮，点击按钮就会弹出对话框，点击对话框中的
yes或者no按钮后对话框就会消失。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。
看官们，关于AlertDialog Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!