Flutter学习日记之自定义封装Dialog

Posted 2021-06-29 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/118035843,转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

海到无边天作岸，山登绝顶我为峰。

今天分享的内容是关于Dialog的封装自定义，源码地址：https://gitee.com/fjjxxy/flutter-study.git，效果如下：

源码项目中这个Dialog的类是CommonDialog，参数如下:

参数	说明
title	标题
titleStyle	标题文字的样式
content	内容
contentStyle	内容样式
cancelText	取消按钮的文字
confirmText	确认按钮的文字
onConfirm	确认的点击事件
onCancel	取消的点击事件
cancelBtnStyle	取消按钮的样式
confirmBtnStyle	确认按钮的样式
cancelTextStyle	取消按钮的文字样式
confirmTextStyle	确认按钮的文字样式
imageNetUrl	顶部图片的网络地址
imageAssetsUrl	顶部图片的本地地址

注：imageNetUrl与imageAssetsUrl不能同时出现，断言如下：

assert(!(imageNetUrl != null && imageAssetsUrl != null))

构造函数如下：两个点击事件是必选的参数

  CommonDialog(
      {@required this.onConfirm,
      @required this.onCancel,
      this.title = "提示",
      this.content = "",
      this.titleStyle,
      this.contentStyle,
      this.cancelText = "取消",
      this.confirmText = "确定",
      this.cancelBtnStyle,
      this.confirmBtnStyle,
      this.cancelTextStyle,
      this.confirmTextStyle,
      this.imageNetUrl,
      this.imageAssetsUrl})
      : assert(!(imageNetUrl != null && imageAssetsUrl != null));

完整的对话组件的代码如下:

class CommonDialog extends Dialog {
  var title;
  var titleStyle;
  var content;
  var contentStyle;
  var cancelText;
  var confirmText;
  var onConfirm;
  var onCancel;
  var cancelBtnStyle;
  var confirmBtnStyle;
  var cancelTextStyle;
  var confirmTextStyle;
  var imageNetUrl;
  var imageAssetsUrl;

  CommonDialog(
      {@required this.onConfirm,
      @required this.onCancel,
      this.title = "提示",
      this.content = "",
      this.titleStyle,
      this.contentStyle,
      this.cancelText = "取消",
      this.confirmText = "确定",
      this.cancelBtnStyle,
      this.confirmBtnStyle,
      this.cancelTextStyle,
      this.confirmTextStyle,
      this.imageNetUrl,
      this.imageAssetsUrl})
      : assert(!(imageNetUrl != null && imageAssetsUrl != null));

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
      type: MaterialType.transparency, //透明类型
      child: Center(
        child: Container(
          height: 250,
          width: double.infinity,
          margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
          decoration: BoxDecoration(
            color: ColorUtils.color_white,
            borderRadius: BorderRadius.circular(10),
            border: Border.all(color: ColorUtils.color_white),
          ),
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: [
                imageAssetsUrl == null
                    ? imageNetUrl != null
                        ? Image.network(
                            imageNetUrl,
                            width: 40,
                            height: 40,
                          )
                        : SizedBox(
                            height: 0,
                          )
                    : Image.asset(
                        imageAssetsUrl,
                        width: 40,
                        height: 40,
                      ),
                imageAssetsUrl != null || imageNetUrl != null
                    ? SizedBox(
                        height: 20,
                      )
                    : SizedBox(
                        height: 0,
                      ),
                Text(
                  "$title",
                  style: this.titleStyle ??
                      TextStyle(fontSize: 20, color: Colors.black),
                ),
                SizedBox(
                  height: 20,
                ),
                Expanded(
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                      Expanded(
                          child: Text(
                        "$content",
                        style: this.contentStyle ??
                            TextStyle(fontSize: 15, color: Colors.black),
                      ))
                    ])),
                Container(
                  width: double.infinity,
                  padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                  child: Row(
                    children: [
                      Container(
                        height: 40,
                        width: 100,
                        child: OutlinedButton(
                            onPressed: onCancel,
                            child: Text(
                              "$cancelText",
                              style: cancelTextStyle ?? TextStyle(fontSize: 15),
                            ),
                            style: cancelBtnStyle ??
                                ButtonStyle(
                                    foregroundColor: MaterialStateProperty.all(
                                        ColorUtils.color_blue_0C84FF),
                                    backgroundColor: MaterialStateProperty.all(
                                        ColorUtils.color_blue_EEF6FF),
                                    shape: MaterialStateProperty.all(
                                        RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(20))),
                                    side: MaterialStateProperty.all(BorderSide(
                                        color: ColorUtils.color_white)))),
                      ),
                      Expanded(child: Text("")),
                      Container(
                        height: 40,
                        width: 100,
                        child: OutlinedButton(
                            onPressed: onConfirm,
                            child: Text(
                              "$confirmText",
                              style:
                                  confirmTextStyle ?? TextStyle(fontSize: 15),
                            ),
                            style: confirmBtnStyle ??
                                ButtonStyle(
                                    foregroundColor: MaterialStateProperty.all(
                                        ColorUtils.color_white),
                                    backgroundColor: MaterialStateProperty.all(
                                        ColorUtils.color_blue_0C84FF),
                                    shape: MaterialStateProperty.all(
                                        RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(20))),
                                    side: MaterialStateProperty.all(BorderSide(
                                        color: ColorUtils.color_white)))),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如何使用?

                showDialog(
                    context: context,
                    builder: (context) {
                      return CommonDialog(
                        title: "温馨提示",
                        titleStyle:
                            TextStyle(color: Colors.black, fontSize: 20),
                        content: "公共场所请勿抽烟",
                        contentStyle:
                            TextStyle(color: Colors.black, fontSize: 15),
                        confirmText: "下一步",
                        cancelText: "取消",
                        onCancel: () {
                          Toast.toast(context, msg: "取消");
                          Navigator.pop(context);
                        },
                        onConfirm: () {
                          Toast.toast(context, msg: "确定");
                          Navigator.pop(context);
                        },
                        cancelBtnStyle: ButtonStyle(
                            foregroundColor: MaterialStateProperty.all(
                                ColorUtils.color_blue_0C84FF),
                            backgroundColor: MaterialStateProperty.all(
                                ColorUtils.color_blue_EEF6FF),
                            shape: MaterialStateProperty.all(
                                RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20))),
                            side: MaterialStateProperty.all(
                                BorderSide(color: ColorUtils.color_white))),
                        confirmBtnStyle:                                 ButtonStyle(
                            foregroundColor: MaterialStateProperty.all(
                                ColorUtils.color_white),
                            backgroundColor: MaterialStateProperty.all(
                                ColorUtils.color_blue_0C84FF),
                            shape: MaterialStateProperty.all(
                                RoundedRectangleBorder(
                                    borderRadius:
                                    BorderRadius.circular(20))),
                            side: MaterialStateProperty.all(BorderSide(
                                color: ColorUtils.color_white))),
                        cancelTextStyle: TextStyle(fontSize: 15),
                        confirmTextStyle: TextStyle(fontSize: 15),
                        // imageNetUrl: "https://profile.csdnimg.cn/D/6/7/0_qq_40785165",
                        imageAssetsUrl: "assets/images/icon_warn.png",
                      );
                    });

以上的参数除了事件以外可以不定义，代码仅供参考
到此为止，封装的对话框就可以拿来用了，要是觉得有用记得点个赞，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个Star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!