如何在给定的分钟内以编程方式更新圆形百分比指示器的进度颜色？

Posted 2023-02-24

【中文标题】如何在给定的分钟内以编程方式更新圆形百分比指示器的进度颜色？

【英文标题】：How to update the progress color of CircularPercentIndicator programatically for a given period of minutes?

【发布时间】：2021-02-03 08:46:10

【问题描述】：

我有这个组件：

GestureDetector(
                onLongPress: () 
                  _startTimer();
                ,
                onLongPressUp: () 
                  _timer.cancel();
                ,
                onLongPressEnd: (LongPressEndDetails longPressEndDetails) 
                  _timer.cancel();
                ,
                child: CircularPercentIndicator(
                  animationDuration: 200,
                  animateFromLastPercent: true,
                  radius: 150.0,
                  lineWidth: 10.0,
                  percent: _progress,
                  progressColor: Colors.red,
                  backgroundColor: Colors.white,
                  animation: true,
                  circularStrokeCap: CircularStrokeCap.butt,
                ),
              ),

而启动定时器的方法是：

void _startTimer() 
    const oneSec = const Duration(milliseconds: 200);
    _timer = Timer.periodic(oneSec, (timer) 
      print(timer.tick.toString());
      final updated = ((_progress + 0.01).clamp(0.0, 1.0) * 100);

      print(updated.round() / 100);
      // if (_progress < 1.0)
      setState(() 
        _progress = updated.round() / 100;
      );
    );
  

  @override
  void dispose() 
    _timer.cancel();
    super.dispose();
  

我的问题是，我想缓慢而平稳地填充进度颜色，即根据剩余时间更新百分比。像 Snapchat 录像机之类的东西。我想填满 3 分钟的百分比。我尝试过玩不同的东西，但要么太不流畅，要么很快就完成了。 我究竟做错了什么？ 谢谢

【参考方案1】：

为什么不简单地使用它

  void _startTimer() 
    if (_progress < 1) 
      const oneSec = const Duration(milliseconds: 200);
      _timer = Timer.periodic(oneSec, (timer) 
        setState(() 
          _progress = min(_progress + (200 / (3 * 60 * 1000)), 1);
        );
      );
    
  

【参考方案2】：

嘿，您的代码 _startTimer() 功能看起来不错，但您的 onlclick 有问题，已更新您的代码试试这个

GestureDetector(
   onTap: () 
     _startTimer();
              ,
              child: CircularPercentIndicator(
                animationDuration: 200,
                animateFromLastPercent: true,
                radius: 50.0,
                lineWidth: 10.0,
                percent: _progress,
                progressColor: Colors.red,
                backgroundColor: Colors.blue,
                animation: true,
                circularStrokeCap: CircularStrokeCap.butt,
              ),
            )

void _startTimer() 
    const oneSec = const Duration(milliseconds: 200);
    _timer = Timer.periodic(oneSec, (timer) 
      if(_progress==1.0)_timer.cancel();
      final updated = ((_progress + 0.01).clamp(0.0, 1.0) * 100);
      setState(() 
        _progress = updated.round() / 100;
      );
    );
  

【讨论】：

感谢您的评论，但这不是我要找的 :) 我遇到的问题是进度指示器。