Question

我想在我的应用程序中显示5分钟的计时器，即使关闭该应用程序也不会停止，并以mm：ss格式显示剩余时间。如何显示时间？

Answer 1

这是一个非常基本的示例，说明了这样的计时器如何工作，它永久存储目标时间：

class TimerApp extends StatefulWidget {
  @override
  _TimerAppState createState() => _TimerAppState();
}

class _TimerAppState extends State<TimerApp> {
  SharedPreferences prefs;
  DateTime target;
  String timeLeft = "";
  bool running = true;

  @override
  void initState() async {
    super.initState();

    prefs = await SharedPreferences.getInstance();
    target = DateTime.fromMillisecondsSinceEpoch(prefs.getInt('target'));

    if (target == null || target < DateTime.now()) {
      target = DateTime.now().add(Duration(minutes: 5));
    }
    executeTimer();
  }

  @override
  void dispose() {
    prefs.setInt('target', target.millisecondsSinceEpoch);
    running = false;
    super.dispose();
  }

  void executeTimer() async {
    while (running) {
      setState(() {
        timeLeft = DateTime.now().isAfter(target)
          ? '5 min expired. Restart app to reset.'
          : target.difference(DateTime.now()).toString();
      });
      await Future.delayed(Duration(seconds: 1), () {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Text(timeLeft),
    );
  }
}

请注意，这个例子不是很充实；缺少一些功能，使用while (running)循环可能不是最优雅的解决方案。

您可以查看以下更多资源：

用于持久保存状态的shared_preferences package。
此Fluttery egg timer tutorial使用更复杂的状态管理形式。

如何在Flutter应用中显示5分钟不可阻挡的计时器？

1 个答案: