来自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'),
    );
  }
}

1720081738358.png

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

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