Flutter:当倒数计时器达到 0 时执行动作
Posted
技术标签:
【中文标题】Flutter:当倒数计时器达到 0 时执行动作【英文标题】:Flutter: Perform an action when a countdown timer reaches 0 【发布时间】:2020-04-15 20:36:26 【问题描述】:我在 Flutter 中创建了一个显示倒数计时器的屏幕。我能够播放、暂停和重新启动计时器,但我试图弄清楚当计时器达到 0 时如何执行操作(例如,重新启动自身)。
由于 dart 文件相当长,我只是在下面复制我认为是相关部分的内容。但如果需要,我可以添加更多。
首先我为倒数计时器创建一个小部件/类:
class Countdown extends AnimatedWidget
Countdown( Key key, this.animation ) : super(key: key, listenable: animation);
Animation<int> animation;
@override
build(BuildContext context)
return Text(
animation.value.toString(),
style: TextStyle(
fontSize: 120,
color: Colors.deepOrange
),
);
然后我有一个有状态的小部件,它创建控制器并导入一些数据(gameData.countdownClock
是倒数计时器的开始时间,它来自之前屏幕上的用户输入):
class _GameScreenState extends State<GameScreen> with TickerProviderStateMixin
AnimationController _controller;
_GameScreenState(this.gameData);
GameData gameData;
@override
void initState()
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: gameData.countdownClock),
);
然后是显示时钟的容器:
Container(
child: Countdown(
animation: StepTween(
begin: gameData.countdownClock,
end: 0,
).animate(_controller),
),
),
我必须在最后一个容器中添加一个侦听器吗?或者别的地方? (或者完全是别的东西!)
感谢任何帮助。谢谢
【问题讨论】:
【参考方案1】:我在这个页面上找到了答案:
After complete the widget animation run a function in Flutter
我需要将.addStatusListener
添加到initState()
中的动画控制器中。
所以新的initState()
代码如下所示:
void initState()
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: gameData.countdownClock),
);
_controller.addStatusListener((status)
if(status == AnimationStatus.completed)
_controller.reset();
);
【讨论】:
【参考方案2】:动画控制器的可能值在 0 到 1 之间。
所以我认为你必须在gamedata.countDownClock
上添加监听器
请检查下面的代码,您可能会从中得到一些想法。
import 'dart:async';
import 'package:flutter/material.dart';
class GameScreen extends StatefulWidget
@override
_GameScreenState createState() => _GameScreenState();
class _GameScreenState extends State<GameScreen> with SingleTickerProviderStateMixin
int countdownClock = 10;
@override
void initState()
super.initState();
// Your Game Data Counter Change every one Second
const oneSec = const Duration(seconds:1);
new Timer.periodic(oneSec, (Timer t)
// Restart The Counter Logic
if (countdownClock == 0)
countdownClock = 11;
setState(() countdownClock = countdownClock - 1; );
);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(title: Text("")),
body: Center(
child: Text('$countdownClock')
),
);
【讨论】:
谢谢,这看起来是个不错的解决方案。对于我的代码,我意识到最好的答案是将.addStatusListener
添加到initState()
中的控制器。以上是关于Flutter:当倒数计时器达到 0 时执行动作的主要内容,如果未能解决你的问题,请参考以下文章