AnimatedBuilder

AnimatedBuilder

AnimatedBuilder 也是用于构建动画的通用 Widget，是渲染树中的一个独立的类，适用于要提取单独动画效果的较复杂的 Widget；可自动监听来自 Animation 对象的通知，无需手动调用 addListener()。

AnimatedBuilder 继承自 AnimatedWidget``它增加了一个build 方法,

构造函数

const AnimatedBuilder({
    super.key,
    required Listenable animation,
    required this.builder,
    this.child,
  }) 

我们将上一章用AnimatedWidget实现的例子，用AnimatedBuilder重构：

import 'package:flutter/material.dart';

class AnimatedBuilderPage extends StatefulWidget {
  const AnimatedBuilderPage({Key? key}) : super(key: key);

  @override
  State<AnimatedBuilderPage> createState() => _AnimatedBuilderPageState();
}

class _AnimatedBuilderPageState extends State<AnimatedBuilderPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(
        duration: const Duration(seconds: 2),
        vsync: this
    );
    //使用Tween图片宽高从0变到300
    _animation = Tween(begin: 0.0,end: 300.0).animate(_controller);
    //启动动画正向执行
    _controller.forward();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedBuilder'),),
      body: AnimatedBuilder(
        animation: _animation,
        child:  Image.asset('images/avatar.jpg',width: _animation.value,height: _animation.value,),
        builder: (BuildContext context,child){
          return Center(
            child: SizedBox(
              height: _animation.value,
              width: _animation.value,
              child: child,
            ),
          );
        },
      )
    );
  }
}