Flutter Widget组件库:AlertDialog
66
2024-07-04
描述
一个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。
- 0
- 0
-
赞助
微信支付宝 -
分享