如何将通过 Timer.periodic 从 API 检索到的数据集成到 Flutter Cubit 项目中

Posted 2023-02-23

【中文标题】如何将通过 Timer.periodic 从 API 检索到的数据集成到 Flutter Cubit 项目中

【英文标题】：How to integrate data retrieved from an API via Timer.periodic into Flutter Cubit project

【发布时间】：2021-12-12 00:53:35

【问题描述】：

我正在开发一个基于 Flutter Bloc/Cubit 的应用程序，在该应用程序中我需要运行 Timer.periodic，它会以特定的重复持续时间从 API 检索数据，然后在检索到新数据时更新 UI。

我对 Timer.periodic 应该在哪里运行以及如何与 Cubit 集成的工作流程感到困惑，这样当状态发生变化时，UI 会根据在 Timer.periodic 的回调中检索到的数据进行更新。每次周期性火灾。现在，当手动启动 Timer.periodic 时，该回调运行良好。但是，当然，它需要以某种方式集成到 Cubit 流程中，这是我不太明白该怎么做。

有人对这样的项目有任何指导或经验吗？

【问题讨论】：

你有一些代码吗？如果是这样，请粘贴您到目前为止所获得的内容

【参考方案1】：

您可以在cubit 中使用Timer 来使用最新值更新UI 小示例来使用计时器更新UI

    import 'dart:async';

    import 'package:flutter/material.dart';
    import 'package:flutter_bloc/flutter_bloc.dart';
    import 'package:bloc/bloc.dart';
    import 'package:meta/meta.dart';

    void main() async 
      runApp(MyApp());
    

    class MyApp extends StatefulWidget 
      const MyApp(Key? key) : super(key: key);

      @override
      _MyAppState createState() => _MyAppState();
    

    class _MyAppState extends State<MyApp> 
      @override
      Widget build(BuildContext context) 
        return MaterialApp(
          theme: ThemeData(),
          darkTheme: ThemeData.dark(),
          home: const HomePage(),
        );
      
    

    class HomePage extends StatefulWidget 
      const HomePage(Key? key) : super(key: key);

      @override
      State<HomePage> createState() => _HomePageState();
    

    class _HomePageState extends State<HomePage> 
      @override
      Widget build(BuildContext context) 
        return Scaffold(
          appBar: AppBar(),
          body: BlocBuilder<UpdatetimerCubit, UpdatetimerState>(
            bloc: UpdatetimerCubit(),
            builder: (context, state) 
              if (state is UpdatetimerUIState) 
                return Column(
                  children: [
                    TextButton(
                      onPressed: () ,
                      child: Text('Reset'),
                    ),
                    Text('$state.currentTime'),
                  ],
                );
              
              return Text('$DateTime.now().millisecondsSinceEpoch');
            ,
          ),
        );
      
    

    class UpdatetimerCubit extends Cubit<UpdatetimerState> 
      Timer? timer;
      UpdatetimerCubit() : super(UpdatetimerInitial()) 
        timer = Timer.periodic(const Duration(seconds: 5), (timer) 
          print('Timer');
          emit(UpdatetimerUIState(DateTime.now().millisecondsSinceEpoch));
        );
      
      void closeTimer() 
        timer?.cancel();
      
    

    @immutable
    abstract class UpdatetimerState 

    class UpdatetimerInitial extends UpdatetimerState 

    class UpdatetimerUIState extends UpdatetimerState 
      final int currentTime;

      UpdatetimerUIState(this.currentTime);
    

【讨论】：

谢谢。您的答案和代码向我展示了我所需要的。试图将 Timer.periodic 放在肘外。把它放在 Cubit 里面是关键。