我們項(xiàng)目開發(fā)中，有很多地方會(huì)用到dialog，雖然flutter自身也有，比如AboutDialog、AlertDialog、SimpleDialog、CupertinoAlertDialog等等之類的，但是這些滿足不了我們的控制欲，我們想要的是它可以根據(jù)我們的想法而隨改變，并不是那么死板，所以呢，就想到封裝好多的組件來用，一來，提高了它的靈活性，二來，可以分享給他人使用，三來，可以提高自身對(duì)于flutter 的進(jìn)一步認(rèn)識(shí)等等，總之呢，一句話，封裝肯定比不封裝好的很多，廢話不多說，直接上代碼：
image
61888FC43B1C6D8E155E81E04B155C06.png
7DAAFF6EBB20C7DB1A856D875BF82EBF.png
class CustomDialog extends Dialog {
final double width; // 寬度
final double height; // 高度
final String title; // 頂部標(biāo)題
final String content; // 內(nèi)容
final String cancelTxt; // 取消按鈕的文本
final String enterTxt; // 確認(rèn)按鈕的文本
final Function callback; // 修改之后的回掉函數(shù)
CustomDialog({
this.width: 270,
this.height: 141,
this.title,
this.content, // 根據(jù)content來，判斷顯示哪種類型
this.cancelTxt: "取消",
this.enterTxt: "確認(rèn)",
this.callback
});
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 375, height: 812)..init(context); // 屏幕適配
String _inputVal = "";
return GestureDetector( // 點(diǎn)擊遮罩層隱藏彈框
child: Material(
type: MaterialType.transparency, // 配置透明度
child: Center(
child: GestureDetector( // 點(diǎn)擊遮罩層關(guān)閉彈框，并且點(diǎn)擊非遮罩區(qū)域禁止關(guān)閉
onTap: () {
print('我是非遮罩區(qū)域～');
},
child: Container(
width: this.width,
height: this.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
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( // 邊框默認(rèn)色
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: <Widget>[
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, // 繼承父級(jí)的高度
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); // 通過回掉函數(shù)傳給父級(jí)
}
Navigator.pop(context); // 關(guān)閉dialog
}
)
)
]
)
)
]
)
)
)
)
),
onTap: () {
Navigator.pop(context);
}
);
}
}
看完之后是不是感覺很簡(jiǎn)單呢，喜歡的直接拿去用吧～～,接下來，我們看看如何調(diào)用它的，其實(shí)也超簡(jiǎn)單的哦
showDialog(
context: context,
builder: (context) {
return CustomDialog(
title: '昵稱',
enterTxt: "修改",
callback: (res) {
setState(() {
this.settingData[index]['message'] = res;
});
this.editorToast();
}
);
}
);
以上呢就是我寫的封裝自定義dialog，歡迎大家評(píng)論，小編也是初學(xué)flutter，如有寫的不足之處，還請(qǐng)各位大佬多多指出，謝謝大家啦～
