Flutter的Alert 对话框

📌 相关文章

📜 Flutter的Alert 对话框

📅 最后修改于: 2021-09-02 05:10:51 🧑 作者: Mango

警报对话框通知用户需要确认的情况。警报框是需要用户确认的提示。关闭应用程序时使用警报框的非常基本的用法，通常，我们会通过提示通知您是否要退出。那是一个警告框。

下面添加的代码显示了如何在flutter执行警报对话框。我使用了一个按钮(flutter的凸起按钮)来触发警报对话框。在其press属性中，我们必须使用flutter的showDialog小部件。它需要上下文和构建器。在构建器中，我们为AlertDialog小部件提供了标题、内容(标题的描述)和操作(是或否按钮)，我们的警报对话框就可以使用了。

更改对话框的主要属性：

动作：显示在对话框底部的一组动作
标题：对话框的标题以大字体显示在对话框的顶部。
内容：这给出了关于您提供给警报对话框的标题的消息/描述。
backgroundColor：它为正在使用的小部件提供背景颜色。
海拔：海拔高度为小部件提供了高度，它为小部件提供了默认阴影。

Flutter提供了自己的 show Dialog 小部件，用于显示对话框。

例子：

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      body: Container(
        child: Center(
          child: RaisedButton(
            onPressed: () {
              return showDialog(
                context: context,
                builder: (ctx) => AlertDialog(
                  title: Text("Alert Dialog Box"),
                  content: Text("You have raised a Alert Dialog Box"),
                  actions: [
                    FlatButton(
                      onPressed: () {
                        Navigator.of(ctx).pop();
                      },
                      child: Text("okay"),
                    ),
                  ],
                ),
              );
            },
            child: Text("Show alert Dialog box"),
          ),
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?