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 时执行动作的主要内容,如果未能解决你的问题,请参考以下文章

为啥倒数计时器突然执行得很快?

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

Flutter 中的倒数计时器日期和时间格式

倒数计时器变为负数 (00:00:00)

当活动暂停时,如何正确停止倒数计时器中的媒体播放器?

后台任务仅适用于模拟器