添加StatusListener后LinearProgressIndicator无动画效果问题咨询

你仅为AnimationController添加了状态监听器，该监听器仅会在动画状态（开始、结束、正向运行、反向运行）变更时触发回调，而动画运行过程中每一帧的controller.value数值变化不会触发回调。因此只有动画全部完成时才会执行一次setState触发页面重绘，进度条自然没有连续变化的动画效果。

有两种常用实现方式，可按需选择：

方案1：添加帧监听器（最简修改） #

在原有代码基础上，为AnimationController添加帧监听器，每一帧动画更新时主动触发重绘即可，修改后initState内的controller初始化代码如下：

@override
void initState() {
  controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5),
  )
  // 新增帧监听器，每帧更新时触发重绘
  ..addListener(() {
    setState(() {});
  })
  ..addStatusListener((AnimationStatus status) {
    setState(() {
      if(status == AnimationStatus.completed) test = true;
    });
  });
  controller.forward();
  super.initState();
}

方案2：使用AnimatedBuilder（性能更优） #

该方案仅会重绘进度条组件本身，不需要触发整页build，性能更好，修改build方法内的进度条部分代码即可，无需给controller加帧监听器：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.fromLTRB(30,50,10,30),
      child: Column(
        children: [
          const Text('Hello, Welcome', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 60),),
          // 用AnimatedBuilder包裹进度条
          AnimatedBuilder(
            animation: controller,
            builder: (context, child) {
              return LinearProgressIndicator(
                value: controller.value,
                semanticsLabel: 'Linear progress indicator',
              );
            },
          ),
          if(test == true) const Text('Test is true')
        ],
      )
    ),
  );
}

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