如何将Timer.periodic定时获取的API数据集成到Flutter Cubit项目中

实现核心思路 #

Timer的生命周期要和Cubit的生命周期绑定，不要放在UI层管理，避免页面销毁后定时器泄漏，也方便直接在Cubit内部处理接口返回的新数据、直接emit新状态触发UI更新。

具体实现步骤 #

• 1. 在Cubit内部管理Timer实例 #

  首先在Cubit类中定义Timer私有变量，在Cubit初始化的时候启动定时器，销毁的时候自动关闭定时器。

import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:your_app/data/api_repository.dart';
import 'package:your_app/data/data_model.dart';

class DataPollingCubit extends Cubit<DataState> {
  // 注入你的API请求仓库
  final ApiRepository apiRepo;
  // 私有Timer实例，避免外部随意修改
  Timer? _pollingTimer;
  // 轮询周期，可根据需求调整，这里设为5秒
  final Duration _pollingInterval = const Duration(seconds: 5);
  // 请求锁，避免重复请求
  bool _isFetching = false;

  DataPollingCubit(this.apiRepo) : super(DataLoading()) {
    // Cubit初始化时直接启动轮询
    startPolling();
  }

  // 启动轮询方法
  void startPolling() {
    // 先关闭已存在的定时器，避免重复创建
    _pollingTimer?.cancel();
    _pollingTimer = Timer.periodic(_pollingInterval, (timer) async {
      if (_isFetching) return;
      await _fetchNewData();
    });
    // 启动后立刻拉取一次数据，不用等第一个周期
    _fetchNewData();
  }

  // 拉取数据的核心逻辑
  Future<void> _fetchNewData() async {
    _isFetching = true;
    try {
      final newData = await apiRepo.fetchLatestData();
      // 和旧数据对比，有变更才emit新状态，避免UI无意义刷新
      if (state is DataSuccess && (state as DataSuccess).data == newData) {
        _isFetching = false;
        return;
      }
      emit(DataSuccess(data: newData));
    } catch (e) {
      emit(DataFailed(errorMsg: e.toString()));
    }
    _isFetching = false;
  }

  // 手动暂停轮询的方法，可按需暴露给UI层调用
  void pausePolling() {
    _pollingTimer?.cancel();
  }

  // Cubit销毁时必须关闭定时器，防止内存泄漏
  @override
  Future<void> close() {
    _pollingTimer?.cancel();
    _pollingTimer = null;
    return super.close();
  }
}

// 对应的State定义示例
abstract class DataState {}
class DataLoading extends DataState {}
class DataSuccess extends DataState {
  final DataModel data;
  DataSuccess({required this.data});

  // 重写==和hashCode方便数据对比，可选但建议加
  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is DataSuccess &&
          runtimeType == other.runtimeType &&
          data == other.data;

  @override
  int get hashCode => data.hashCode;
}
class DataFailed extends DataState {
  final String errorMsg;
  DataFailed({required this.errorMsg});
}

• 2. UI层集成 #

  正常使用BlocBuilder监听状态变更即可，不需要额外处理定时器逻辑，Cubit销毁时会自动关闭定时器，比如页面dispose时Cubit会跟着触发close生命周期：

BlocProvider(
  create: (context) => DataPollingCubit(ApiRepository()),
  child: Scaffold(
    body: BlocBuilder<DataPollingCubit, DataState>(
      builder: (context, state) {
        if (state is DataSuccess) {
          return ListView.builder(
            itemCount: state.data.items.length,
            itemBuilder: (context, index) => Text(state.data.items[index].content),
          );
        }
        if (state is DataFailed) {
          return Center(child: Text(state.errorMsg));
        }
        return const Center(child: CircularProgressIndicator());
      },
    ),
  ),
)

注意事项 #

• 如果需要页面退到后台时暂停轮询、回到前台时恢复，可以在UI层用WidgetsBindingObserver监听应用生命周期，调用Cubit暴露的pausePolling和startPolling方法即可
• 不要在UI层创建Timer，既不好管理生命周期，还要跨层传递数据给Cubit，增加冗余逻辑
• 如果轮询逻辑需要在多个页面复用，可以把轮询逻辑封装到单独的仓库类，Cubit只做状态分发即可

内容的提问来源于stack exchange，提问作者MBU