flutter组件_AlertDialog

官方说明:A Material Design alert dialog.

翻译:一个材料设计警告对话框。

作者释义:显示弹窗,类似于element ui中的Dialog组件。

AlertDialog的定义

dart 复制代码
  const AlertDialog({
    super.key,
    this.icon,
    this.iconPadding,
    this.iconColor,
    this.title,
    this.titlePadding,
    this.titleTextStyle,
    this.content,
    this.contentPadding,
    this.contentTextStyle,
    this.actions,
    this.actionsPadding,
    this.actionsAlignment,
    this.actionsOverflowAlignment,
    this.actionsOverflowDirection,
    this.actionsOverflowButtonSpacing,
    this.buttonPadding,
    this.backgroundColor,
    this.elevation,
    this.shadowColor,
    this.surfaceTintColor,	
    this.semanticLabel,
    this.insetPadding = _defaultInsetPadding,
    this.clipBehavior = Clip.none,
    this.shape,
    this.alignment,
    this.scrollable = false,
  });

属性:

属性名 属性值
icon 显示在对话框顶部的可选图标
iconPadding icon图标内边距
iconColor icon图标的颜色
titlePadding 标题内边距
titleTextStyle 标题样式
content Dialog内容
contentPadding 内容内边距
contentTextStyle 内容样式
actions 控件底部显示的操作集按钮
actionsPadding 操作集内边距
actionsAlignment 操作集对齐方式
actionsOverflowAlignment 操作集溢出对齐方式
actionsOverflowDirection 操作机溢出装饰
actionsOverflowButtonSpacing 操作集按钮间距
buttonPadding 按钮内边距
backgroundColor Diolog背景色
elevation 设置阴影的大小,若没设置shadowColor则无效
shadowColor 设置阴影颜色
surfaceTintColor 作对话框背景色上的表面色调叠加的颜色, 它反映了对话框的 elevation高程
clipBehavior 超出部分剪切方式
insetPadding 对话框距离屏幕边缘间距
shape 对话框外形
alignment 子控件对齐方式
scrollable 是否可以滚动

实例:

dart 复制代码
class AlertDialogWidget extends StatelessWidget {
  const AlertDialogWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: null,
      style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.indigo)),
      child: SizedBox(
        child: TextButton(
          onPressed: () {
            showDialog(context: context, builder: (context) {
              return AlertDialog(
                icon: const Icon(Icons.person), // 图标
                iconPadding: const EdgeInsets.only(top: 50), // 图标的内边距
                iconColor: Colors.indigo, // 图标颜色
                title: const Text("title"), // Dialog标题
                titleTextStyle: const TextStyle(color: Colors.indigo), // 标题样式
                content: const Text("I'm AlertDialog content."), // Dialog内容
                actions: [ // Dialog事件
                  TextButton(
                    onPressed: () => Navigator.pop(context, 'Cancel'),
                    child: const Text("cancel"),
                  ),
                  TextButton(
                    onPressed: () => Navigator.pop(context, 'Confirm'),
                    child: const Text("confirm"),
                  ),
                ],
                actionsAlignment: MainAxisAlignment.center,
                backgroundColor: const Color(0xFFFF0000),
                elevation: 24, // 控制阴影的大,若没设置shadowColor则无效
                shadowColor: const Color(0xFFFF0000), // 设置阴影颜色
                surfaceTintColor: const Color(0xFF0000FF), // surfaceTintColor
              );
            }
          );
        },
        child: const Text(
          "alert",
          style: TextStyle(
            fontSize: 12,
            color: Colors.white,
          ),
        ),
      ),
    ));
  }
}

注意

需要搭配showDialog方法使用

如有错误请及时与作者联系~~非常感谢

相关推荐
Bryce李小白3 分钟前
Flutter实现Android原生相机拍照
android·数码相机·flutter
你听得到1117 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
RaidenLiu1 天前
Flutter Shader预热技术解析与实践指南
flutter·前端框架
ITfeib2 天前
Flutter基础
flutter
RaidenLiu2 天前
RepaintBoundary是什么?怎么用?
flutter
淹没2 天前
🚀 告别复杂的HTTP模拟!HttpHook让Dart应用测试变得超简单
android·flutter·dart
吴Wu涛涛涛涛涛Tao2 天前
Flutter 个人主页实践笔记
flutter
愿天深海2 天前
Flutter 提取图像主色调 ColorScheme.fromImageProvider
android·前端·flutter
梦想改变生活3 天前
《Flutter篇第一章》基于GetX 和 Binding、Dio 实现的 Flutter UI 架构
flutter·ui·架构