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

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

相关推荐
农夫三拳_有点甜4 小时前
Flutter Expanded 组件总结
flutter
火柴就是我5 小时前
跟着官方demo 学flame 之 word 坐标系以及Camera的一些属性
flutter
新镜6 小时前
【Flutter】drag_select_grid_view: ^0.6.2 使用
flutter
程序员老刘6 小时前
Google突然“变脸“,2026年要给全球开发者上“紧箍咒“?
android·flutter·客户端
鹏多多.11 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
新镜1 天前
【Flutter】RefreshIndicator 无法下拉刷新问题
flutter
星秋Eliot1 天前
Flutter的三棵树
前端·flutter
humiaor1 天前
Flutter之riverpod状态管理Widget UI详解
flutter·consumer·widget·hooks·provider·riverpod·hookwidget
农夫三拳_有点甜1 天前
Flutter Stack 组件总结
flutter
MaoJiu1 天前
Flutter混合开发:在iOS工程中嵌入Flutter Module
flutter·ios