dart - 在Flutter中实现确定的CircularProgressIndicator？

我了解如何实现不确定进度指示器，但是您将如何实现在特定持续时间内绑定(bind)到动画的不确定指示器？

示例代码:

double _barValue = 1.0;

_animation = Tween(
    begin: 1.0,
    end: 0.0,
).animate(animationController)
    ..addListener(() {
        setState(() {
            _barValue = _animation.value;
        });
    });

CircularProgressIndicator(
    value: _barValue,
    // colorValue: <-- how do you implement this??
    backgroundColor: tangerine.withAlpha(100),
),

最佳答案

如果您希望它随着进度条的变化而改变颜色，请使用以下内容。此示例将使用与示例进度相同的值从0％的蓝色渐变为100％的红色:

    AnimationController _colorAnimationController = AnimationController(vsync: this);

    Animation<Color> _colorAnimation = ColorTween(
        begin: Colors.blue,
        end: Colors.red,
    ).animate(
      _colorAnimationController
    );

    _colorAnimationController.value = _barValue;

    ...

    CircularProgressIndicator(
      value: _barValue,
      valueColor: _colorAnimation,
    ),

如果您希望它以与进度不同的某种模式更改颜色，则只需设置AnimationController并像使用其他任何动画一样运行它即可。

如果仅要将值覆盖为特定颜色，请执行以下操作:

    CircularProgressIndicator(
      value: val,
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
    ),