【问题标题】:Circular Progress Indicator - Maths Questions循环进度指示器 - 数学问题
【发布时间】:2020-08-05 07:35:56
【问题描述】:

好的,我正在使用 circularProgressIndicator 来显示计时器何时完成,但是我的大脑已经停止运作,我无法让数学为它工作。

  1. 定时器值为 90 秒
  2. 进度指示器在 1 时为 100%,在 0.5 时为 50%,等等。
  3. 我每秒钟将 90 秒计时器减少 1 秒,因此显示倒计时

我还想在 90 秒的计时器用完时逐步添加进度指示器值以达到 100%。

90 是一个例子,这个会定期改变

我尝试过的

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

问题:如何找到一个值的小数,然后除以 60 以便每秒迭代

【问题讨论】:

  • 看起来我把它复杂化了。 _intervalProgress += ( 1 / intervalValueSeconds);

标签: flutter math dart


【解决方案1】:

您可以像下面这样计算和显示进度。根据您的问题,您似乎正在寻找变量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();
  }
  
}

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

【讨论】:

    【解决方案2】:

    使用下面的逻辑

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

    示例:

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

    【讨论】:

      猜你喜欢
      • 2011-02-21
      • 1970-01-01
      • 2020-09-04
      • 2015-09-28
      • 2018-11-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-10-08
      相关资源
      最近更新 更多