flutter中已經(jīng)為我們提供了一些彈窗組件像showDialog,AlertDialog,但是有時候系統(tǒng)提供的彈窗并不能滿足我們的要求,那我們就要自己動手自定義一個.先看效果......
è???o|.gif
想自定義彈窗最簡單的應(yīng)該就是集成現(xiàn)成的Dialog類,然后我們重新畫出我們想要的組件.我們放個Material組件來改變透明度,然后我們居中控件放一個,然后再來個進度條完美
class LoadingDialog extends Dialog {
String text;
bool backMiss;
LoadingDialog({Key key, @required this.text,this.backMiss}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap:(){
if (backMiss)
{
Navigator.of(context).pop();
}
},
child: Material(
type: MaterialType.transparency,
child: new Center(
child: new SizedBox(
width: 120.0,
height: 120.0,
child: new Container(
decoration: ShapeDecoration(
color: Color(0xffffffff),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: new Text(
text,
style: new TextStyle(fontSize: 12.0),
),
),
],
),
),
),
),
) ,
);
}
}
其實這個類里有這么幾行代碼,我們給Material組件加了個點擊效果,點擊后彈窗會隱藏
GestureDetector(
onTap:(){
if (backMiss)
{
Navigator.of(context).pop();
}
},
這是因為雖然原生組件Dialog給了一個屬性 barrierDismissible,這個屬性控制點擊外部彈窗是否能消失但是自定義后,這個屬性無效了,原因我不知道,希望大神能告訴我,小弟感激不盡.所以我只能用添加手勢來解決.定義好我們的組件以后我們在想要用的時候調(diào)用就好了
//展示彈窗
showDialog<Null>(
context: context, //BuildContext對象
//點擊外部可以消失
barrierDismissible: false,
builder: (BuildContext context) {
return new LoadingDialog( //調(diào)用對話框
text: '正在加載...',
backMiss: false,
);
});
