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

Question

我了解如何实现一个不确定进度指示器，但是您将如何实现一个与特定持续时间的动画相关联的确定指示器？

示例代码:

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),
),

Answer 1

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

class _MyClassState extends State<_MyClass> with SingleTickerProviderStateMixin {
    AnimationController _colorAnimationController;

  @override
  void initState() {
    ...
    _colorAnimationController = AnimationController(vsync: this);
    ...
  }

  @override
  void dispose() {
    ...
    _colorAnimationController?.dispose();
    ...
  }

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


    // Use inside setState, for example
    _colorAnimationController.value = _barValue;

    ...

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

如果您希望它以某种独立于进度的模式改变颜色，只需设置 AnimationController 并像处理任何其他动画一样运行它。

如果您只想将值覆盖为特定颜色:

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