Flutter AnimatedWidget 实现动画的自动刷新

Posted 2021-06-27 早起的年轻人

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

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

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢
• 系列学习教程在这里

在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<DemoAnimatedBuilder>
    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("测试数据"),
                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}

自定义AnimatedWidget 的实现 TransformAnimated 如下

class TransformAnimated extends AnimatedWidget {
  Widget child;

  TransformAnimated({this.child, Animation animation})
      : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    //获取动画控制监听
    Animation<double> animation = listenable;
    //自定义
    return Container(
      color: Colors.grey[200],
      width: double.infinity,
      margin: EdgeInsets.only(
        left: 20,
        right: 20,
        top: 60 * animation.value / 2,
      ),
      height: 260,
      //向下平移
      child: Transform.translate(
        // 参数一 表示 在x轴方向的平移量
        // 参数二 表示 在y轴方向的平移量
        offset: Offset(0.0, 150 * animation.value),
        //执行动画的子Widet
        child: child,
      ),
    );
  }
}