简体   繁体   English

循环进度指示器 - 数学问题

[英]Circular Progress Indicator - Maths Questions

Ok, I am using a circularProgressIndicator to show when a timer reaches complete, however my brain has ceased to function and I can't get the math to work for it.好的,我正在使用circularProgressIndicator来显示计时器何时完成,但是我的大脑已经停止了 function 并且我无法得到数学运算。

  1. The timer value is 90 seconds计时器值为 90 秒
  2. The progress indicator is 100% at 1, or 50% at 0.5 etc..进度指示器在 1 时为 100%,在 0.5 时为 50%,依此类推。
  3. Every second I reduce the 90 seconds timer by 1 second so show the countdown每秒我将 90 秒计时器减少 1 秒,所以显示倒计时

I would also like to incrementally add to the progress indicator value to reach 100% when the timer of 90 seconds has run out.当 90 秒的计时器用完时,我还想逐步添加进度指示器值以达到 100%。

90 is an example, this will change regularly 90是一个例子,这个会定期改变

What I have tried我试过的

1. _intervalProgress += (( 100 / intervalValueSeconds) / 60;
2. _intervalProgress += (( 100 / intervalValueSeconds) * ( 100 / 60 )) / 100; 

Question: How can I find a decimal of a value, then divide by 60 in order to iterate ever second <--- Wait, I just realised that the value isn't 60 seconds, it is the value of the timer, therefore I have been calculating it wrong all along.问题:如何找到一个值的小数,然后除以 60 以便每秒迭代 <--- 等等,我刚刚意识到这个值不是 60 秒,它是计时器的值,因此我一直算错。

Use below logic使用以下逻辑

 int value = ((yourValue/ 90) * 100).toInt(); // here 90 is higest value which you have
 print(value);

Example:例子:

     int value = ((45/ 90) * 100).toInt();
     print(value);  // Output will be 50

You can calculate and display the progress like below.您可以计算并显示如下所示的进度。 As per your question, seems like you are looking for the calculation of the variable progressFraction .根据您的问题,您似乎正在寻找变量progressFraction的计算。

class _MyWidgetState extends State<MyWidget> {
  int totalSeconds = 90;
  int secondsRemaining = 90;
  double progressFraction = 0.0;
  int percentage = 0;
  Timer timer;

  @override
  void initState() {
    timer = Timer.periodic(Duration(seconds: 1), (_) {
      if(secondsRemaining == 0){
        return;
      }
      setState(() {
        secondsRemaining -= 1;
        progressFraction = (totalSeconds - secondsRemaining) / totalSeconds;
        percentage = (progressFraction*100).floor();
        
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 20),
        Text('$secondsRemaining seconds remaining'),
        SizedBox(height: 20),
        CircularProgressIndicator(
          value: progressFraction,
        ),
        SizedBox(height: 20),
        Text('$percentage% complete'),
      ],
    );
  }
  
  @override
  void dispose(){
    timer.cancel();
    super.dispose();
  }
  
}

Demo on dartpad - https://dartpad.dev/4fae5a168d5e9421562d0e813b907a01 dartpad 上的演示 - https://dartpad.dev/4fae5a168d5e9421562d0e813b907a01

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM