Flutter中如何正确将Bloc转换为无需Event的Cubit实现

原有代码问题说明 #

• 原Bloc代码存在语法错误：close()生命周期方法被错误嵌套在构造函数内部，无法被框架正常调用，资源释放逻辑失效
• 原代码中Connectivity().checkConnectivity()是异步方法，直接同步取值无法拿到真实初始网络状态，初始化判断逻辑失效
• 原代码声明了subscription变量但未实际赋值监听引用，网络状态监听无法被取消，存在内存泄漏风险
• 转换时若未移除Event依赖、未正确替换泛型、未在组件树注入Cubit实例，都会导致运行报错

重构步骤 #

1. 删除冗余Event代码 #

Cubit不需要事件层做中转，直接删除原有ConnectedEvent、OnConnectedEvent、OnNotConnectedEvent三个类即可。

2. 复用/修正状态类 #

原有状态类逻辑可直接复用，可修正原拼写错误（原ConnectedSucess拼写不规范，改为ConnectedSuccess）：

abstract class ConnectedState {}
class ConnectedInitial extends ConnectedState {}
class ConnectedSuccess extends ConnectedState {}
class ConnectedFailure extends ConnectedState {}

3. 实现网络状态Cubit #

import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:connectivity_plus/connectivity_plus.dart';

class ConnectedCubit extends Cubit<ConnectedState> {
  StreamSubscription? _connectivitySubscription;

  ConnectedCubit() : super(ConnectedInitial()) {
    // 初始化时检查当前网络状态
    _checkInitialStatus();
    // 注册网络状态监听
    _connectivitySubscription = Connectivity().onConnectivityChanged.listen(_updateConnectionStatus);
  }

  Future<void> _checkInitialStatus() async {
    final ConnectivityResult result = await Connectivity().checkConnectivity();
    _updateConnectionStatus(result);
  }

  // 直接通过方法触发状态更新，无需Event中转
  void _updateConnectionStatus(ConnectivityResult result) {
    final bool hasNetwork = result == ConnectivityResult.wifi || result == ConnectivityResult.mobile;
    emit(hasNetwork ? ConnectedSuccess() : ConnectedFailure());
  }

  // 生命周期方法必须写在类层级，禁止嵌套在构造函数内
  @override
  Future<void> close() {
    _connectivitySubscription?.cancel();
    return super.close();
  }
}

4. 组件层适配 #

首先在组件树上层注入Cubit实例，再替换原有BlocConsumer的泛型参数：

// 根节点注入示例
void main() {
  runApp(
    BlocProvider(
      create: (context) => ConnectedCubit(),
      child: const MyApp(),
    ),
  );
}

// 页面内使用
home: BlocConsumer<ConnectedCubit, ConnectedState>(
  listener: (context, state) {
    if (state is ConnectedFailure) {
      // 无网络提示逻辑，例如弹出SnackBar、跳转无网络页
    }
  },
  builder: (context, state) {
    // 根据状态返回对应页面内容
    return const Scaffold(/* 页面内容 */);
  },
)

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