我们项目开发中，有很多地方会用到dialog，虽然flutter自身也有，比如AboutDialog、AlertDialog、SimpleDialog、CupertinoAlertDialog等等之类的，但是这些满足不了我们的控制欲，我们想要的是它可以根据我们的想法而随改变，并不是那么死板，所以呢，就想到封装好多的组件来用，一来，提高了它的灵活性，二来，可以分享给他人使用，三来，可以提高自身对于flutter 的进一步认识等等，总之呢，一句话，封装肯定比不封装好的很多，废话不多说，直接上代码：
image
61888FC43B1C6D8E155E81E04B155C06.png
7DAAFF6EBB20C7DB1A856D875BF82EBF.png
class CustomDialog extends Dialog {
final double width; // 宽度
final double height; // 高度
final String title; // 顶部标题
final String content; // 内容
final String cancelTxt; // 取消按钮的文本
final String enterTxt; // 确认按钮的文本
final Function callback; // 修改之后的回掉函数
CustomDialog({
this.width: 270,
this.height: 141,
this.title,
this.content, // 根据content来，判断显示哪种类型
this.cancelTxt: "取消",
this.enterTxt: "确认",
this.callback
});
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 375, height: 812)..init(context); // 屏幕适配
String _inputVal = "";
return GestureDetector( // 点击遮罩层隐藏弹框
child: Material(
type: MaterialType.transparency, // 配置透明度
child: Center(
child: GestureDetector( // 点击遮罩层关闭弹框，并且点击非遮罩区域禁止关闭
onTap: () {
print('我是非遮罩区域～');
},
child: Container(
width: this.width,
height: this.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Visibility(
visible: this.content == null ? true : false,
child: Positioned(
top: 0,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.fromLTRB(0, 19, 0, 19),
child: Text(
"${this.title}",
style: TextStyle(
fontSize: ScreenUtil(allowFontScaling: true).setSp(17),
color: Color(0xff000000),
fontWeight: FontWeight.w600
)
)
)
)
),
Container(
padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
alignment: Alignment.center,
child: this.content != null ?
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(0, 0, 0, 42),
alignment: Alignment.center,
child: Text(
"${this.content}",
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil(allowFontScaling: true).setSp(17),
fontWeight: FontWeight.w600
)
)
)
:
TextField(
textAlignVertical: TextAlignVertical.center,
style: TextStyle(
fontSize: ScreenUtil(allowFontScaling: true).setSp(13)
),
textInputAction: TextInputAction.send,
decoration: new InputDecoration(
hintText: '${this.title}',
contentPadding: const EdgeInsets.symmetric(vertical: 3.0, horizontal: 5.0),
enabledBorder: OutlineInputBorder( // 边框默认色
borderSide: const BorderSide(color: Color(0xffC8C7CC))
),
focusedBorder: OutlineInputBorder( // 聚焦之后的边框色
borderSide: const BorderSide(color: Color(0xfff3187D2))
),
),
onChanged: (value) {
_inputVal = value;
}
)
),
Container(
height: 43,
decoration: BoxDecoration(
border: Border(top: BorderSide(width: 1,color: Color(0xffEFEFF4)))
),
child: Row(
children: [
Expanded(
flex: 1,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
child: Container(
height: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(right: BorderSide(width: 1,color: Color(0xffEFEFF4)))
),
child: Text(
"${this.cancelTxt}",
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xff007AFF),
fontSize: ScreenUtil(allowFontScaling: true).setSp(17),
fontWeight: FontWeight.w400
)
)
),
onTap: () {
Navigator.pop(context);
}
)
),
Expanded(
flex: 1,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
child: Container(
height: double.infinity, // 继承父级的高度
alignment: Alignment.center,
child: Text(
"${this.enterTxt}",
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xff007AFF),
fontSize: ScreenUtil(allowFontScaling: true).setSp(17),
fontWeight: FontWeight.w600
)
)
),
onTap: () {
if(this.content != null) {
this.callback(_inputVal); // 通过回掉函数传给父级
}
Navigator.pop(context); // 关闭dialog
}
)
)
]
)
)
]
)
)
)
)
),
onTap: () {
Navigator.pop(context);
}
);
}
}
看完之后是不是感觉很简单呢，喜欢的直接拿去用吧～～,接下来，我们看看如何调用它的，其实也超简单的哦
showDialog(
context: context,
builder: (context) {
return CustomDialog(
title: '昵称',
enterTxt: "修改",
callback: (res) {
setState(() {
this.settingData[index]['message'] = res;
});
this.editorToast();
}
);
}
);
以上呢就是我写的封装自定义dialog，欢迎大家评论，小编也是初学flutter，如有写的不足之处，还请各位大佬多多指出，谢谢大家啦～