Flutter AnimatedWidget 实现动画的自动刷新

2401_84149496

于 2024-05-12 19:10:44 发布

阅读量964

点赞数 26

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_84149496/article/details/138763902

版权

程序员专栏收录该内容

287 篇文章 0 订阅

订阅专栏

如果你有兴趣你可以关注一下公众号 biglead 来获取最新的学习资料。

在Flutter中, AnimatedWidget可以理解为动画Animation的辅助类，可以理解为创建一个Widget自带动画效果，也可以理解为使用Widget来封装复杂的组合的自定义动画实现，当然这个过程中是不需要 setState的。

本页面实现 Demo 效果如下

在这里插入图片描述

程序入口

main() {
runApp(MaterialApp(
//不显示 debug标签
debugShowCheckedModeBanner: false,
//显示的首页面
home: DemoStreamBuilder(),
));
}

DemoStreamBuilder 主页面

class DemoAnimatedBuilder extends StatefulWidget {
@override
_DemoAnimatedBuilderState createState() => _DemoAnimatedBuilderState();
}

class _DemoAnimatedBuilderState extends State
with SingleTickerProviderStateMixin {
//动画控制器
AnimationController _animationController;

@override
void initState() {
super.initState();
//0.0 - 1.0
_animationController = new AnimationController(
vsync: this, duration: Duration(milliseconds: 1800));

}

@override
Widget build(BuildContext context) {
//返回
return Scaffold(
//按钮
floatingActionButton: FloatingActionButton(
//小图标
child: Icon(Icons.add),
//点击事件
onPressed: () {
_animationController.reset();
_animationController.forward();
},
),
appBar: AppBar(
title: Text(“Animated”),
),
body: Container(
padding: EdgeInsets.all(30),
//线性布局
child: Column(
children: [

TransformAnimated(
animation: _animationController,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(“测试数据”),
Text(“测试数据”),
Text(“测试数据”),
],
),
),

],
),
),
);
}
}