Flutter：保持持久（计时器）小部件打开并跨多个屏幕运行

Question

我有一个应用程序需要一个持久的、跨多个屏幕的计时器功能，该功能可以从一个或两个不同的屏幕启动。\n我可以构建一个计时器小部件和倒计时部分。但我似乎无法弄清楚如何保持它在所有屏幕上运行和浮动，这意味着当我点击时，它仍然可以在不同的其他屏幕上显示？或者我是否需要在我进入的每个屏幕上用全局状态重建它？

\n

I\xe2\x80\x99m 认为底部有一个小的持久模态表？但持续的部分已经让我挣扎了一个星期了。

\n

我使用堆栈吗？我只是不知道从哪里开始可以跨所有屏幕的部分。

\n

请帮忙，伙计们。先感谢您！！！

\n

Answer 1

创建一个名为 countdown_timer.dart 的 dart 文件

在此文件中添加一个全局变量。

int secondsLeft = 500; //add time you wish to countdown in seconds

我所说的全局是指不在班级内。现在在这个名为 CountdownTimer 的下面创建一个有状态的小部件。添加持续时间为 1 秒的周期性计时器。在每次更新时，减少全局秒数并使用剩余秒数来显示倒计时。如果剩余秒数小于 0，则停止周期性计时器。你的课程看起来像这样

import 'dart:async';
import 'package:flutter/material.dart';
int secondsLeft = 500;

class CountDownTimer extends StatefulWidget {
  const CountDownTimer({Key? key}) : super(key: key);


  @override
  State<CountDownTimer> createState() => _CountDownTimerState();
}

class _CountDownTimerState extends State<CountDownTimer> {
  late Timer countDown;
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    countDown = Timer.periodic(Duration(seconds:1), (timer){
      secondsLeft--;
      if(secondsLeft <= 0)
      {
        timer.cancel();
      }
      setState((){});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text("$secondsLeft seconds left");
  }
}

您现在可以CountDownTimer()在任何类别中使用，它将返回一致的倒计时。