Flutter中使用多个AnimatedController搭配AnimatedBuilder是否为合理实践？

现有写法评估 #

你当前嵌套2个AnimatedBuilder的写法功能上是完全可用的，但不属于最优实践：

• 嵌套层级会随着动画数量增加持续变深，代码可读性和可维护性下降
• 存在不必要的嵌套Widget层级，虽然性能影响不大，但可以进一步简化

单AnimatedBuilder监听多动画的实现方式 #

你可以使用Flutter内置的Listenable.merge()方法，将多个Listenable类型的对象（所有动画控制器、动画对象都实现了Listenable接口）合并为一个组合Listenable，直接传给AnimatedBuilder的animation参数即可，修改后的代码如下：

@override
Widget build(BuildContext context) {
  // 提前获取MediaQuery避免重复调用
  final Size screenSize = MediaQuery.of(context).size;
  return AnimatedBuilder(
    // 合并两个动画的监听，任意一个更新都会触发builder重建
    animation: Listenable.merge([_outerAnimationController, _innerCurvedAnimation]),
    builder: (context, _) {
      return CustomPaint(
        size: screenSize,
        painter: ShowCasePainter(
          centerPosition: Offset(screenSize.width / 2, screenSize.height / 2),
          innerCircleRadius: widget.innerCircleRadius + (_innerCurvedAnimation.value * PaddingSmall),
          outerCircleRadius: _outerAnimationTween.value,
        ),
      );
    },
  );
}

动画顺序优化建议 #

针对你先执行非重复开场动画、再执行循环动画的场景，可以给开场动画控制器添加状态监听，开场执行完成后自动启动循环动画，避免时序问题：

// 初始化阶段添加监听
@override
void initState() {
  super.initState();
  // 初始化你的控制器、补间等代码...
  _outerAnimationController.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      // 开场动画结束后启动循环弹跳动画
      _innerAnimationController.repeat(reverse: true);
    }
  });
  // 启动开场动画
  _outerAnimationController.forward();
}

内容的提问来源于stack exchange，提问作者Atamyrat Babayev