1

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

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

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

4

1 回答 1

0

您可以在 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);
    }
于 2021-10-26T19:01:48.863 回答