Flutter Dialog 动画
2020-03-16 本文已影响0人
向日花开
本文对 Dialog 做一次系统性学习记录，包括系统 Dialog,自定义 Dialog,Dialog 动画。
AlertDialog
Flutter 中要显示 Dialog 调用 showDialog()即可显示:
Future<T> showDialog<T>({
@required BuildContext context,//上下文
bool barrierDismissible = true,//点击dialog之外是否关闭dialog
Widget child,//要显示的dialog
})
barrierDismissible 为 true 时点击 dialog 以外区域可以关闭 Dialog，否则一直显示在屏幕上。手动调用
Navigator.of(context).pop(this);
可以关闭 Dialog。看一个简单案例：
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Alert Dialog"),
content: Text("Hello Alert Dialog"),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop(this);
},
child: Text("关闭"))
],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
);
});
效果图
自定义 Dialog
只要我们继承系统的 Dialog，就可以自己定义我们的 Dialog。
class BaseDialog extends Dialog {
//子控件
final Widget widget;
// 高
final double height;
//宽
final double width;
BaseDialog(this.widget, this.height, this.width, {Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Center(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: new Material(
type: MaterialType.transparency,
child: new Container(
height: this.height,
width: this.width,
decoration: ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
))),
child: this.widget),
)),
);
}
}
BaseDialog 运用
showDialog(
context: context,
builder: (BuildContext context) {
return BaseDialog(
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20),
alignment: Alignment.center,
child: Text(
"自定义Dialog",
style: TextStyle(
fontSize: 18,
letterSpacing: 2,
color: Theme.of(context).primaryColor),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 20),
child: Text("Hello 自定义Dialog"),
),
),
Container(
height: 50,
width: double.infinity,
margin: EdgeInsets.only(top: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: () {
Navigator.of(context).pop(this);
},
child: Container(
margin: EdgeInsets.only(bottom: 20),
alignment: Alignment.center,
width: 100,
height: 30,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Theme.of(context)
.primaryColor
.withOpacity(0.4),
Theme.of(context).primaryColor
]),
borderRadius:
BorderRadius.circular(15),
color:
Theme.of(context).primaryColor),
child: Text(
"关闭",
style: TextStyle(
letterSpacing: 3,
color: Colors.white),
),
))
],
),
)
],
),
240,
MediaQuery.of(context).size.width * .6);
});
效果图
Dialog 动画
除了 showDialog()方法显示 Dialog 之外，还有一个 showGeneralDialog()方法。
showGeneralDialog()就是用来给我们动画显示 Dialog 用的。
Future<T> showGeneralDialog<T>({
@required BuildContext context,
@required RoutePageBuilder pageBuilder,
bool barrierDismissible,
String barrierLabel,
Color barrierColor,
Duration transitionDuration,
RouteTransitionsBuilder transitionBuilder,
})
主要参数
- barrierDismissible：控制 Dialog 是否消失
- barrierColor： Dialog 的背景色
- transitionDuration： Dialog 显示或者消失的时间，也就是动画的时间
- transitionBuilder： RouteTransitionsBuilder 类型的构建方法，定义了 Dialog 的动画。
RouteTransitionsBuilder
typedef RouteTransitionsBuilder = Widget Function(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child);
旋转动画
showGeneralDialog(
context: context,
pageBuilder: (context, anim1, anim2) {},
barrierColor: Colors.grey.withOpacity(.4),
barrierDismissible: true,
barrierLabel:"" ,
transitionDuration: Duration(milliseconds: 400),
transitionBuilder: (context, anim1, anim2, child) {
return Transform.rotate(
angle: math.radians(anim1.value * 360),
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20))),
title: Text("Dialog"),
content: Text("Hello world"),
),
);
});
效果图
缩放
showGeneralDialog(
context: context,
pageBuilder: (context, anim1, anim2) {},
barrierColor: Colors.grey.withOpacity(.4),
barrierDismissible: true,
barrierLabel: "",
transitionDuration: Duration(milliseconds: 400),
transitionBuilder: (context, anim1, anim2, child) {
return Transform.scale(
scale: anim1.value,
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20))),
title: Text("Dialog"),
content: Text("Hello world"),
),
);
});
效果图
旋转与渐变
showGeneralDialog(
context: context,
pageBuilder: (context, anim1, anim2) {},
barrierColor: Colors.grey.withOpacity(.4),
barrierDismissible: true,
barrierLabel: "",
transitionDuration: Duration(milliseconds: 400),
transitionBuilder: (context, anim1, anim2, child) {
return Transform.rotate(
angle: math.radians(anim1.value * 360),
child: Opacity(
opacity: anim1.value,
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20))),
title: Text("Dialog"),
content: Text("Hello world"),
),
));
});
效果图
缩放与渐变
showGeneralDialog(
context: context,
pageBuilder: (context, anim1, anim2) {},
barrierColor: Colors.grey.withOpacity(.4),
barrierDismissible: true,
barrierLabel: "",
transitionDuration: Duration(milliseconds: 400),
transitionBuilder: (context, anim1, anim2, child) {
return Transform.scale(
scale: anim1.value,
child: Opacity(
opacity: anim1.value,
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20))),
title: Text("Dialog"),
content: Text("Hello world"),
),
));
});
效果图
曲线
showGeneralDialog(
context: context,
pageBuilder: (context, anim1, anim2) {},
barrierColor: Colors.grey.withOpacity(.4),
barrierDismissible: true,
barrierLabel: "",
transitionDuration: Duration(milliseconds: 400),
transitionBuilder: (context, anim1, anim2, child) {
final curvedValue =
Curves.easeInOutBack.transform(anim1.value) - 1.0;
return Transform(
transform: Matrix4.translationValues(
0.0, curvedValue * 200, 0.0),
child: Opacity(
opacity: anim1.value,
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20))),
title: Text("Dialog"),
content: Text("Hello world"),
),
));
});
效果图
最后
贴一张自己学习Flutter的公众号,感兴趣的小伙伴可以一起学习哦。。。
