Flutter:显示分钟和秒的倒计时器

1tu0hz3e  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(201)

我已经创建了一个倒计时计时器,将倒计时从用户输入的持续时间,在分钟。
倒计时计时器在技术上工作,但只有分钟正在显示倒计时。秒数始终保持在:00。
如何让秒数也显示为倒计时计时器的一部分?
下面是相关的代码,摘自一个较长的文件。如果需要的话,我可以提供更多。
代码的各个部分如下所示:
首先,我有一个类,它实际上显示计时器文本并允许它被样式化:

class Countdown extends AnimatedWidget {
  Countdown({ Key key, this.animation }) : super(key: key, listenable: animation);
  Animation<int> animation;

  @override

  build(BuildContext context){

    Duration clockTimer = Duration(seconds: animation.value*60);

    String timerText = '${clockTimer.inMinutes.remainder(60).toString()}:${(clockTimer.inSeconds.remainder(60) % 60).toString().padLeft(2, '0')}';

    return Text(
      "$timerText",
      style: TextStyle(         
        fontSize: 110,
        color: Theme.of(context).primaryColor,
      ),
    );

  }
}

我有一个动画控制器如下:

AnimationController _controller;

  @override

  void dispose(){
    _controller.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();
    @override

      _controller = AnimationController(
          vsync: this,
        duration: Duration(minutes: gameData.levelClock)  // gameData.levelClock is a user entered number elsewhere in the applciation
      );

  }

最后是调用Countdown小部件的代码部分:

Countdown(
     animation: StepTween(
     begin: gameData.levelClock,   // THIS IS A USER ENTERED NUMBER 
     end: 0,
   ).animate(_controller),
)
cotxawn7

cotxawn71#

你可以复制粘贴下面运行完整的代码
您的AnimationController持续时间需要使用秒
代码片段

_controller = AnimationController(
        vsync: this,
        duration: Duration(
            seconds:
                levelClock) // gameData.levelClock is a user entered number elsewhere in the applciation
        );

工作演示

全码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  int _counter = 0;
  AnimationController _controller;
  int levelClock = 180;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
        vsync: this,
        duration: Duration(
            seconds:
                levelClock) // gameData.levelClock is a user entered number elsewhere in the applciation
        );

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Countdown(
              animation: StepTween(
                begin: levelClock, // THIS IS A USER ENTERED NUMBER
                end: 0,
              ).animate(_controller),
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class Countdown extends AnimatedWidget {
  Countdown({Key key, this.animation}) : super(key: key, listenable: animation);
  Animation<int> animation;

  @override
  build(BuildContext context) {
    Duration clockTimer = Duration(seconds: animation.value);

    String timerText =
        '${clockTimer.inMinutes.remainder(60).toString()}:${clockTimer.inSeconds.remainder(60).toString().padLeft(2, '0')}';

    print('animation.value  ${animation.value} ');
    print('inMinutes ${clockTimer.inMinutes.toString()}');
    print('inSeconds ${clockTimer.inSeconds.toString()}');
    print('inSeconds.remainder ${clockTimer.inSeconds.remainder(60).toString()}');

    return Text(
      "$timerText",
      style: TextStyle(
        fontSize: 110,
        color: Theme.of(context).primaryColor,
      ),
    );
  }
}
jutyujz0

jutyujz02#

因此,问题是,当您创建CountDown小部件时,您将开始设置为一个双精度值,即计时器的分钟值(在本例中,该值为5)。随着动画的继续,它将从begin倒计时到end(本例中为0)。在5分钟内,它将从5到0设置动画。
然后使用该值并将其转换为秒,但由于动画的值介于0和5之间,因此它将始终给予5:00、4:00、3:00、2:00、1:00或0:00。
解决方案是将代码更改为

Countdown(
     animation: StepTween(
     begin: gameData.levelClock * 60, // convert to seconds here
     end: 0,
   ).animate(_controller),
)

然后在您的倒计时小部件中将Duration更改为

Duration clockTimer = Duration(seconds: animation.value);

您可以在DartPad here上找到一个工作示例

相关问题