Flutter中点击Inkwell触发事件时BlocBuilder未更新UI，无法显示加载文本

核心问题分析 #

你当前代码的核心问题是事件类与状态类混淆，且Bloc处理事件时没有先emit加载状态，导致BlocBuilder未收到状态变更通知，UI无法触发更新。

具体修复步骤 #

1. 拆分事件与状态类

不要用同一个VendorFollowing既做事件又做状态，拆分出明确的事件和状态类型：

// 事件类
abstract class VendorsingleprofileEvent {}
class VendorFollowRequested extends VendorsingleprofileEvent {
  final int vendorId;
  VendorFollowRequested(this.vendorId);
}

// 状态类
abstract class VendorsingleprofileState {}
class VendorInitial extends VendorsingleprofileState {}
class VendorFollowingLoading extends VendorsingleprofileState {} // 加载状态
class VendorFollowingSuccess extends VendorsingleprofileState {} // 操作成功状态
class VendorFollowingFailed extends VendorsingleprofileState {
  final String error;
  VendorFollowingFailed(this.error);
}

2. 修正Bloc的事件处理逻辑

处理VendorFollowRequested事件时，先emit加载状态触发UI更新，再执行Repository操作，最后emit结果状态：

class VendorsingleprofileBloc extends Bloc<VendorsingleprofileEvent, VendorsingleprofileState> {
  final VendorRepository repository;

  VendorsingleprofileBloc(this.repository) : super(VendorInitial()) {
    on<VendorFollowRequested>((event, emit) async {
      // 先发出加载状态，通知UI切换为"..."
      emit(VendorFollowingLoading());
      try {
        await repository.followVendor(event.vendorId);
        emit(VendorFollowingSuccess());
      } catch (e) {
        emit(VendorFollowingFailed(e.toString()));
      }
    });
  }
}

3. 更新BlocBuilder的UI判断逻辑

根据状态判断是否处于加载状态，动态切换按钮文本和点击可用性：

BlocBuilder<VendorsingleprofileBloc, VendorsingleprofileState>(
  builder: (context, state) {
    bool isLoading = state is VendorFollowingLoading;
    return InkWell(
      onTap: isLoading ? null : () {
        context.read<VendorsingleprofileBloc>().add(VendorFollowRequested(vendorId));
      },
      child: Globalbutton(
        height: 50,
        width: heightandwidth(context)['width'] * .44,
        text: isLoading ? '...' : 'Follow',
        paddingValue: 8.0,
      ),
    );
  },
)

额外检查点 #

• 确保状态类是不可变的，手动实现时用const构造函数，使用freezed库可简化这一步
• 确认BlocProvider的范围覆盖了BlocBuilder，保证两者使用同一个Bloc实例
• 查看控制台print(state)的输出，确认事件触发后Bloc确实emit了VendorFollowingLoading状态

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