BlocBuilder未随商品点赞/取消点赞更新UI问题求助

核心问题根源 #

1. BlocBuilder 触发重建的条件不满足：BlocBuilder 仅在 Cubit emit 新状态时才会重建 UI，但你的 UI 依赖的是外部 medicament 对象的属性，即使 isFavourite 变更，只要 Cubit 的状态没有携带更新后的 medicament，BlocBuilder 无法感知到变化。
2. Cubit 状态无业务数据：当前 LikeOrUnlikeProductSuccessState 是无状态的空类，没有包含更新后的商品实例，导致 BlocBuilder 无法获取最新的点赞状态。
3. 冗余代码无意义：BlocBuilder 的两个分支返回完全相同的 UI 代码，属于无效分支判断。

具体修复步骤 #

1. 修改 Cubit 状态类，携带更新后的商品数据

让成功状态包含更新后的 Medicament 对象，确保 BlocBuilder 能拿到最新状态：

class LikeOrUnlikeProductSuccessState extends LikeOrUnlikeProductState {
  final Medicament medicament;

  LikeOrUnlikeProductSuccessState(this.medicament);
}

2. 调整 Cubit 业务逻辑，emit 带数据的状态

需要让你的 likeMedicament 和 unlikeMedicament 用例返回更新后的 Medicament（如果之前返回的是 Unit，需修改用例逻辑，返回修改后的对象）：

Future<void> likeOrUnlikeMedicamentEvent(Medicament medicament) async {
  if (medicament.isFavourite) {
    final failureOrMedicament = await unlikeMedicament(medicament);
    emit(_mapFailureOrMedicamentToState(failureOrMedicament));
  } else {
    final failureOrMedicament = await likeMedicament(medicament);
    emit(_mapFailureOrMedicamentToState(failureOrMedicament));
  }
}

// 调整状态转换方法，适配返回的Medicament
LikeOrUnlikeProductState _mapFailureOrMedicamentToState(Either<Failure, Medicament> either) {
  return either.fold(
    (failure) => LikeOrUnlikeProductFailureState(message: _mapFailureToMessage(failure)),
    (medicament) => LikeOrUnlikeProductSuccessState(medicament),
  );
}

3. 优化 BlocBuilder，使用状态中的最新数据

去掉冗余分支，直接从状态中读取最新的商品实例渲染 UI：

BlocBuilder<LikeOrUnlikeProductCubit, LikeOrUnlikeProductState>(
  builder: (context, state) {
    // 初始状态用原始数据，成功状态用更新后的数据
    final currentMedicament = state is LikeOrUnlikeProductSuccessState 
        ? state.medicament 
        : medicament;

    return IconButton(
      onPressed: () {
        context.read<LikeOrUnlikeProductCubit>()
            .likeOrUnlikeMedicamentEvent(currentMedicament);
      },
      icon: CircleAvatar(
        radius: 15,
        backgroundColor: Colors.grey[200],
        child: Icon(
          currentMedicament.isFavourite
              ? Icons.favorite
              : Icons.favorite_border_outlined,
          size: 15,
          color: currentMedicament.isFavourite ? Colors.red : Colors.black,
        ),
      ),
    );
  },
)

4. 确保 Medicament 是不可变类（关键）

如果 Medicament 是可变类，直接修改属性不会触发 Flutter 的状态感知。推荐实现不可变类，通过 copyWith 方法生成新对象：

class Medicament {
  final bool isFavourite;
  // 其他商品属性...

  const Medicament({required this.isFavourite, /* 其他属性 */});

  // 修改属性时返回新对象
  Medicament copyWith({bool? isFavourite}) {
    return Medicament(
      isFavourite: isFavourite ?? this.isFavourite,
      // 其他属性同样通过copyWith传递
    );
  }
}

在 usecase 中修改点赞状态时，需通过 copyWith 生成新对象：

// 示例：likeMedicament用例的实现逻辑
Future<Either<Failure, Medicament>> call(Medicament medicament) async {
  // 这里执行点赞的业务逻辑（比如存缓存/接口请求）
  // 然后返回更新后的对象
  return Right(medicament.copyWith(isFavourite: true));
}

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