Flutter AnimatedBuilder 的基本使用

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

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

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

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

AnimatedBuilder继承AnimatedWidget，其中 animation参数为必传参数，用于监听该动画，然后通知更新UI，就无需手动调用addListener监听动画然后调用setState更新UI。

核心使用代码为：

AnimatedBuilder(
   //动画控制器
   animation: _animationController,
   //动画布局构建
   builder: (BuildContext context, Widget child) {
     return Container(...);
   },
   child:...,
 )

本页面实现 Demo 效果如下

启动函数入口

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

DemoAnimatedBuilder 页面

///代码清单
class DemoAnimatedBuilder extends StatefulWidget {
  @override
  _DemoAnimatedBuilderState createState() => _DemoAnimatedBuilderState();
}

class _DemoAnimatedBuilderState extends State<DemoAnimatedBuilder>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    //0 -1.0
    _animationController = AnimationController(
        duration: Duration(
          milliseconds: 1000,
        ),
        vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    //返回 或者说退出页面里的提示
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _animationController.reset();
          _animationController.forward();
        },
      ),
      appBar: AppBar(
        title: Text("AnimatedBuilder"),
      ),
      body: Container(
        padding: EdgeInsets.all(30),
        child: Column(
          children: [

            //动画构建器
            AnimatedBuilder(
              //动画控制器
              animation: _animationController,
              //动画布局构建
              builder: (BuildContext context, Widget child) {
                return Container(
                  margin: EdgeInsets.only(top: 20 * _animationController.value),
                  color: Colors.grey[200],
                  width: MediaQuery.of(context).size.width,
                  height: 300,
                  child: Transform.translate(
                    offset: Offset(0.0, 100 * _animationController.value - 100),
                    child: child,
                  ),
                );
              },
              //动画过程中不执行刷新的子Widget
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("测试使用"),
                  Text("测试使用"),
                  Text("测试使用"),
                ],
              ),
            )

          ],
        ),
      ),
    );
  }
}