[英]Flutter: Perform an action when a countdown timer reaches 0
我在 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),
),
),
我是否必須在最后一個容器中添加偵聽器? 或者別的地方? (或者完全是別的東西!)
任何幫助表示贊賞。 謝謝
我在這個頁面上找到了答案:
我需要將.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();
}
}
);
}
動畫控制器的可能值介於 0 到 1 之間。所以我認為您必須在gamedata.countDownClock
上添加偵聽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')
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.