我已经创建了一个倒计时计时器,将倒计时从用户输入的持续时间,在分钟。
倒计时计时器在技术上工作,但只有分钟正在显示倒计时。秒数始终保持在: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),
)
2条答案
按热度按时间cotxawn71#
你可以复制粘贴下面运行完整的代码
您的AnimationController持续时间需要使用秒
代码片段
工作演示
全码
jutyujz02#
因此,问题是,当您创建
CountDown
小部件时,您将开始设置为一个双精度值,即计时器的分钟值(在本例中,该值为5)。随着动画的继续,它将从begin
倒计时到end
(本例中为0)。在5分钟内,它将从5到0设置动画。然后使用该值并将其转换为秒,但由于动画的值介于0和5之间,因此它将始终给予5:00、4:00、3:00、2:00、1:00或0:00。
解决方案是将代码更改为
然后在您的倒计时小部件中将
Duration
更改为您可以在DartPad here上找到一个工作示例