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％的红色：

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

在Flutter中实现确定的CircularProgressIndicator？

1 个答案: