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方法使用

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

相关推荐
消失的旧时光-194319 小时前
iFlutter --> Flutter 开发者 的 IntelliJ IDEA / Android Studio 插件
flutter·android studio·intellij-idea
马拉萨的春天1 天前
block的样式有哪些?如果copy的话分别会有啥样式
flutter·性能优化·ios的block
Rattenking1 天前
【CSS】---- 图形函数详解
笔记·学习·flutter
程序员老刘1 天前
别再抱怨Flutter方案太多了,这个就叫生态!
flutter·客户端
黄毛火烧雪下1 天前
(一)Flutter 插件项目demo预览图
flutter
站在远方望童年1 天前
WSL2 中的 Flutter 开发环境配置
flutter
w_y_fan1 天前
flutter_native_splash: ^2.4.7
android·前端·flutter
QuantumLeap丶1 天前
《Flutter全栈开发实战指南:从零到高级》- 06 -常用布局组件
flutter·dart
大雷神2 天前
【成长纪实】Flutter中Dart 与Harmony中 ArkTS 异步编程对比:从 Future 到 Promise
flutter·harmonyos
QuantumLeap丶2 天前
《Flutter全栈开发实战指南:从零到高级》- 05 - 基础组件实战:构建登录界面
flutter·ios