同一页面中使用多个Bloc的方案及数据提交问题

单个Bloc vs 多个Bloc的选择 #

单个Bloc #

适合各模块数据强关联、提交需统一校验的场景：比如发票的客户信息与账单地址绑定，产品列表总价直接影响税费计算。

• 优势：状态管理集中，无需处理跨Bloc的数据同步逻辑，提交时直接从单一State取数即可。
• 劣势：State类会包含较多字段，但借助freezed可以将子数据拆分为独立对象（如CustomerInfo、Address），避免State过于臃肿。

多个Bloc #

适合模块相对独立、有复用需求的场景：比如客户信息模块可能在其他订单页面复用。

• 优势：每个Bloc职责单一，State类更简洁，便于单独维护和测试。
• 劣势：需处理跨Bloc的数据依赖（如产品总价更新税费），提交时要聚合多个Bloc的State数据。

单个Bloc的BlocBuilder实现（结合Freezed） #

用freezed定义包含所有模块数据的State，通过buildWhen参数让每个UI分区只监听自己关心的状态变化，避免全量重建：

1. 定义Freezed State #

@freezed
class InvoiceState with _$InvoiceState {
  const factory InvoiceState({
    // 拆分各模块为独立对象
    required CustomerInfo customerInfo,
    required Address billingAddress,
    required Address shippingAddress,
    required List<Product> products,
    required PaymentDetails paymentDetails,
    required TaxInfo taxInfo,
    required OtherFees otherFees,
    // 全局状态
    required bool isSubmitting,
    required String? errorMessage,
  }) = _InvoiceState;

  // 初始状态
  factory InvoiceState.initial() => InvoiceState(
        customerInfo: CustomerInfo.empty(),
        billingAddress: Address.empty(),
        shippingAddress: Address.empty(),
        products: [],
        paymentDetails: PaymentDetails.empty(),
        taxInfo: TaxInfo.empty(),
        otherFees: OtherFees.empty(),
        isSubmitting: false,
        errorMessage: null,
      );
}

2. 分区构建UI #

每个模块的BlocBuilder通过buildWhen过滤状态变化，只在自身关联的数据变更时重建：

// 客户信息分区
BlocBuilder<InvoiceBloc, InvoiceState>(
  buildWhen: (prev, curr) => prev.customerInfo != curr.customerInfo,
  builder: (context, state) {
    return CustomerInfoForm(info: state.customerInfo);
  },
)

// 账单地址分区
BlocBuilder<InvoiceBloc, InvoiceState>(
  buildWhen: (prev, curr) => prev.billingAddress != curr.billingAddress,
  builder: (context, state) {
    return BillingAddressForm(address: state.billingAddress);
  },
)

// 产品列表分区同理
BlocBuilder<InvoiceBloc, InvoiceState>(
  buildWhen: (prev, curr) => prev.products != curr.products,
  builder: (context, state) {
    return ProductList(products: state.products);
  },
)

提交时直接从State中聚合所有数据：

void _submitInvoice(BuildContext context) {
  final state = context.read<InvoiceBloc>().state;
  final invoice = Invoice(
    customer: state.customerInfo,
    billingAddress: state.billingAddress,
    products: state.products,
    // 其他字段...
  );
  // 调用API提交
}

多个Bloc的聚合数据提交方案 #

若采用多Bloc架构，可通过以下方式聚合所有模块数据提交：

1. 提交时直接读取各Bloc状态 #

在提交按钮的点击事件中，通过context.read()获取每个Bloc的当前State，聚合后提交：

ElevatedButton(
  onPressed: () {
    // 读取各Bloc状态
    final customerState = context.read<CustomerBloc>().state;
    final billingState = context.read<BillingAddressBloc>().state;
    final productsState = context.read<ProductsBloc>().state;
    final taxState = context.read<TaxBloc>().state;

    // 先校验各模块数据合法性
    if (!customerState.isValid || !billingState.isValid) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请完善必填信息')),
      );
      return;
    }

    // 聚合为发票对象
    final invoice = Invoice(
      customer: customerState.info,
      billingAddress: billingState.address,
      products: productsState.items,
      taxAmount: taxState.totalTax,
      // 其他字段...
    );

    // 提交到服务器（可通过专门的SubmitBloc处理）
    context.read<SubmitInvoiceBloc>().add(SubmitInvoice(invoice));
  },
  child: const Text('提交发票'),
)

2. 跨Bloc数据依赖处理 #

如果模块间有数据联动（如产品总价更新税费），可以通过Bloc间的事件通信实现：

• ProductsBloc计算出总价后，发出ProductTotalUpdated(total: double)事件；
• TaxBloc监听该事件，根据总价重新计算税费并更新自身State。

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