《Flutter 控件大全》第六个:AnimatedBuilder
程序员文章站
2022-06-01 18:34:47
...
- 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
- 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
- Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
AnimatedBuilder可以让我们轻松的构建动画控件,下面的案例是让flutter logo图片旋转,代码如下:
class _TestState extends State<Test> with TickerProviderStateMixin {
AnimationController animationController;
@override
void initState() {
animationController =
AnimationController(duration: Duration(seconds: 2), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
animationController.forward();
}
});
animation = Tween(begin: 0.0, end: 2.0 * pi).animate(animationController);
//开始动画
animationController.forward();
)
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget child) {
return Transform.rotate(
angle: animation.value,
child: child,
);
},
child: FlutterLogo(size: 60,),
);
}
@override
dispose() {
super.dispose();
animationController.dispose();
}
}
效果如下:
builder
方法是animation的值发生变化会调用builder函数,构建新的组件。
animation
参数表示动画。
child
参数将会传递给builder方法,如果builder
返回一个不依赖于animation的组件,那么这个子控件不会每次都重建,child
参数可以不设置,但官方建议设置,它在某些情况下可以优化其体验。
上一篇: 雷达原理-绪论
推荐阅读
-
《Flutter 控件大全》第四十六个:Flexible、Expanded、Spacer
-
《Flutter 控件大全》第六十六个:PageView
-
《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
-
《Flutter 控件大全》第三十三个:DecoratedBoxTransition
-
《Flutter 控件大全》第二十六个:ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio
-
《Flutter 控件大全》第六个:AnimatedBuilder
-
《Flutter 控件大全》第五十三个:Icon
-
《Flutter 控件大全》第五十一个:GridView
-
《Flutter 控件大全》第三十九个:DraggableScrollableSheet
-
《Flutter 控件大全》第五十个:GridPaper