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

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

相关推荐
Jinkey3 小时前
FlutterBasic - GetBuilder、Obx、GetX<Controller>、GetxController 有啥区别
android·flutter·ios
Summer不秃7 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰7 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
sunly_7 小时前
Flutter:AnimatedSwitcher当子元素改变时,触发动画
flutter
AiFlutter7 小时前
Flutter封装Coap
flutter
旭日猎鹰13 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰13 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神13 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱1 天前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart1 天前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter