Flutter AnimatedWidget 实现动画的自动刷新

Flutter项目开发全套教程 同时被 2 个专栏收录
187 篇文章 61 订阅
11 篇文章 1 订阅

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

如果你有兴趣 你可以关注一下公众号 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<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,
      ),
    );
  }
}
  • 0
    点赞
  • 3
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值