Flutter的Cubit如何触发多个状态变更以更新多个不同Widget？

问题根因 #

你当前的实现存在两个核心问题：

1. Cubit使用单一String类型作为状态，无法同时承载多个独立的UI变更需求，无法满足多条件同时触发时的多状态同步更新
2. 现有if判断的逻辑运算符位置错误，!parsedjsonresponse['ourdata'][0]['code'] == "001" 会先对取值结果做布尔取反，再和字符串比较，永远不会得到预期的true结果

解决方案 #

步骤1：定义承载多状态的不可变状态类

不用额外依赖的话直接写普通类，带copyWith方法方便局部更新状态：

class ProcessingState {
  final bool showCode001Widget;
  final bool showCode002Widget;
  final bool showAlert;

  ProcessingState({
    this.showCode001Widget = false,
    this.showCode002Widget = false,
    this.showAlert = false,
  });

  ProcessingState copyWith({
    bool? showCode001Widget,
    bool? showCode002Widget,
    bool? showAlert,
  }) {
    return ProcessingState(
      showCode001Widget: showCode001Widget ?? this.showCode001Widget,
      showCode002Widget: showCode002Widget ?? this.showCode002Widget,
      showAlert: showAlert ?? this.showAlert,
    );
  }
}

步骤2：重构Cubit实现多条件emit

修改Cubit的泛型类型为自定义的ProcessingState，修正逻辑判断，按需更新状态字段：

import 'dart:convert';
import 'package:bloc/bloc.dart';
import 'package:dio/dio.dart';

class ProcessingCubit extends Cubit<ProcessingState> {
  
  ProcessingCubit() : super(ProcessingState());

  void getDataFromAPI() async {
    // 先重置状态为初始值，避免上次请求的结果残留
    emit(ProcessingState());
    try {
      var dio = Dio();
      Response response = await dio.get(
          'http://our.internalserver.com:8080/api/getdata.php',
          queryParameters: {});
      var parsedjsonresponse = json.decode(response.data.toString());
      
      if (parsedjsonresponse['ourdata']?.isNotEmpty ?? false) {
        final firstItem = parsedjsonresponse['ourdata'][0];
        // 修正逻辑判断，移除错误的前置!运算符
        if (firstItem['code'] == "001") {
          emit(state.copyWith(showCode001Widget: true));
        }
        if (firstItem['code'] == "002") {
          emit(state.copyWith(showCode002Widget: true));
        }
        if (firstItem['alert'] == "1") {
          emit(state.copyWith(showAlert: true));
        }
      }
    } catch(e) {
      // 按需添加异常处理逻辑
      print(e);
    }
  }
}

步骤3：UI层按需监听对应状态字段

不同的Widget可以只监听自己关心的状态字段，互不影响：

• 对应code001的Widget

BlocBuilder<ProcessingCubit, ProcessingState>(
  builder: (context, state) {
    return state.showCode001Widget ? const Text("触发001规则的内容") : const SizedBox.shrink();
  },
  buildWhen: (previous, current) => previous.showCode001Widget != current.showCode001Widget,
)

• 对应alert的Widget

BlocBuilder<ProcessingCubit, ProcessingState>(
  builder: (context, state) {
    return state.showAlert ? const AlertDialog(content: Text("系统提醒")) : const SizedBox.shrink();
  },
  buildWhen: (previous, current) => previous.showAlert != current.showAlert,
)

这种实现支持任意组合的条件触发：无符合条件时所有Widget保持隐藏，符合多个条件时多个对应Widget同时更新，完全满足灵活多状态需求。

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