来自Flutter组件库

描述

一个Material Design风格的提示对话框。

警告对话框（也称为基本对话框）用于向用户提示需要确认的情况。具有可选的标题和可选的操作列表。标题显示在内容上方，操作列表显示在内容下方。

通常作为子控件传递给showDialog方法，该方法会显示对话框,并在对话框被关闭时返回一个 Future。

构造函数

const AlertDialog({///...参数省略});

/// 根据目标平台创建一个自适应AlertDialog
/// 在iOS或macOS上，创建了一个CupertinoAlertDialog
/// 其他平台，创建了一个Material design AlertDialog
/// 通常作为showAdaptiveDialog的子元素传递。
const factory AlertDialog.adaptive({
  ///...参数省略
}) = _AdaptiveAlertDialog;

属性

  /// 可以是任何Widget，但通常是一个表示状态的图标
  final Widget? icon;

  /// 如果不指定，将使用图标的默认颜色或主题颜色
  final Color? iconColor;

  /// icon的Padding，如果没有icon就没有
  /// 默认顶部、左侧、右侧24px，
  /// 底部根据情况，如果有title为16px，如果无title有content根据contentPadding配置，都没有的话就是24px
  final EdgeInsetsGeometry? iconPadding;

  /// 标题，通常是Text组件，但也可以是任何Widget。
  final Widget? title;

  /// 如果没有title就没有titlePadding
  /// 默认顶部、左侧、右侧24px，
  /// 如果有content，底部为0px（仍要看contentPadding），否则20px
  final EdgeInsetsGeometry? titlePadding;

  /// 标题文本的样式
  final TextStyle? titleTextStyle;

  /// 内容
  final Widget? content;

  ///  内容区域与对话框边缘之间的内边距
  final EdgeInsetsGeometry? contentPadding;

  /// 内容文本的样式。注意，这通常不会直接影响嵌套在content中的Widget，除非这些Widget是Text或接受样式参数的文本显示组件。
  final TextStyle? contentTextStyle;

  /// 对话框底部的操作按钮列表
  final List<Widget>? actions;

  /// 操作按钮与对话框边缘之间的内边距
  final EdgeInsetsGeometry? actionsPadding;

  /// 操作按钮在主轴上的对齐方式（水平或垂直方向，取决于对话框的方向）
  final MainAxisAlignment? actionsAlignment;

  /// 当操作按钮过多且溢出时，它们的对齐方式。
  final OverflowBarAlignment? actionsOverflowAlignment;

  /// 当操作按钮溢出时，它们溢出的方向（向上或向下）。
  final VerticalDirection? actionsOverflowDirection;

  /// 当操作按钮溢出并显示溢出按钮时，各个按钮之间的间距。
  final double? actionsOverflowButtonSpacing;

  /// 操作按钮的内边距
  final EdgeInsetsGeometry? buttonPadding;

  /// 对话框的背景颜色。
  final Color? backgroundColor;

  /// 对话框的阴影高度，影响阴影的可见度和深度。
  final double? elevation;

  /// 阴影的颜色
  final Color? shadowColor;

  ///  对话框表面的色调颜色
  final Color? surfaceTintColor;

  ///对话框的语义化标签，这主要用于辅助技术
  final String? semanticLabel;

  /// 相对于对话框边界的内边距。注意，这与contentPadding不同，insetPadding可能用于更广泛的布局调整。
  final EdgeInsets? insetPadding;

  ///对话框中如果子元素超出父元素的范围，该属性将定义如何剪裁子元素。
  final Clip clipBehavior;

  ///定义对话框的形状可以用 ShapeBorder 类型的变量，例如 RoundedRectangleBorder，来调整对话框的外形，如圆角等
  final ShapeBorder? shape;

  /// 对话框内容的对齐方式。这影响对话框内部内容（如标题、内容、操作按钮）的整体布局。
  final AlignmentGeometry? alignment;

  ///当对话框内部的内容超出对话框的可视区域时，可以通过设置 true 使内容区域变为可滚动的
  final bool scrollable;

使用

class DialogExample extends StatelessWidget {
  const DialogExample({super.key});

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        showDialog<String>(
          context: context,
          builder: (BuildContext context) => AlertDialog(
            title: const Text('AlertDialog Title'),
            content: const Text('AlertDialog description'),
            actions: <Widget>[
              TextButton(
                onPressed: () => Navigator.pop(context, 'Cancel'),
                child: const Text('Cancel'),
              ),
              TextButton(
                onPressed: () => Navigator.pop(context, 'OK'),
                child: const Text('OK'),
              ),
            ],
          ),
        ).then((value)=>print(value));
        
      },
      child: const Text('Show Dialog'),
    );
  }
}

这个Demo展示了一个 TextButton，当按下时，会调用 showDialog 方法。

当被调用时，该方法会在应用程序当前内容之上显示一个 Material 对话框，有Cancel和OK两个按钮，点击后关闭弹窗并在控制台对应打印文案Cancel或OK。