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

Question

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

我对 Timer.periodic 的工作流程感到困惑运行以及如何与 Cubit 集成以便 UI 在 State 更改时根据在 Timer.periodic 的回调中检索数据，每次周期性触发时都会调用该回调。现在，当手动启动 Timer.periodic 时，回调运行正常。但是，当然，它需要以某种方式集成到 Cubit 流程中，这是我不太明白该怎么做。

有没有人对这样的项目有任何指示或经验？

Answer 1

您可以使用 cubit 内部的定时器来更新 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);
    }

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

How to integrate data retrieved from an API via Timer.periodic into Flutter Cubit project

flutter

dart

bloc

cubit

flutter-cubit