簡體   English   中英

Flutter:當倒數計時器達到 0 時執行一個動作

[英]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),
                                          ),
                                        ),

我是否必須在最后一個容器中添加偵聽器? 或者別的地方? (或者完全是別的東西!)

任何幫助表示贊賞。 謝謝

我在這個頁面上找到了答案:

完成小部件動畫后,在 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();
      }
    }
    );
  }

動畫控制器的可能值介於 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM