flutter中已经为我们提供了一些弹窗组件像showDialog,AlertDialog,但是有时候系统提供的弹窗并不能满足我们的要求,那我们就要自己动手自定义一个.先看效果......
�度.gif
想自定义弹窗最简单的应该就是集成现成的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,这个属性控制点击外部弹窗是否能消失但是自定义后,这个属性无效了,原因我不知道,希望大神能告诉我,小弟感激不尽.所以我只能用添加手势来解决.定义好我们的组件以后我们在想要用的时候调用就好了
//展示弹窗
showDialog<Null>(
context: context, //BuildContext对象
//点击外部可以消失
barrierDismissible: false,
builder: (BuildContext context) {
return new LoadingDialog( //调用对话框
text: '正在加载...',
backMiss: false,
);
});
