Riverpod调用StateNotifier方法修改bool值后UI未更新如何解决

核心原因 #

StateNotifier依赖state对象的引用变化触发状态更新，你直接修改原有列表内元素的属性不会改变列表本身的引用，因此StateNotifier无法检测到状态变化，不会通知UI刷新。另外你的实体类未做不可变处理、init方法存在冗余逻辑，也可能带来额外问题。

修复步骤 #

1. 改造实体类为不可变类型，新增copyWith方法 #

将类的属性全部声明为final，新增copyWith方法用于快速生成修改属性后的新对象：

class EleccionConSleccionClase {
  final String eleccion;
  final bool selec;

  EleccionConSleccionClase({
    required this.eleccion,
    this.selec = true,
  });

  EleccionConSleccionClase copyWith({
    String? eleccion,
    bool? selec,
  }) {
    return EleccionConSleccionClase(
      eleccion: eleccion ?? this.eleccion,
      selec: selec ?? this.selec,
    );
  }
}

2. 修复StateNotifier的逻辑 #

• 精简init方法冗余的循环逻辑
• 重写CambiarSeleccion方法，生成全新列表赋值给state触发更新：

class EleccionesConSeleccionNotifier
    extends StateNotifier<List<EleccionConSleccionClase>> {
  final List<EleccionSinSeleccionClase> ListaElecciones;

  EleccionesConSeleccionNotifier({required this.ListaElecciones}) : super([]);

  void init() {
    if (ListaElecciones.isNotEmpty) {
      // 移除冗余循环，直接一次转换生成初始列表
      state = ListaElecciones.map(
          (cb) => EleccionConSleccionClase(eleccion: cb.eleccion)).toList();
    }
  }

  void CambiarSeleccion(String nombre) {
    // 生成全新的列表赋值给state，触发状态更新
    state = state.map((item) {
      return item.copyWith(
        selec: item.eleccion == nombre,
      );
    }).toList();
  }
}

3. 可选UI优化 #

可以根据选中状态切换图标显示，更符合单选交互逻辑：

IconButton(
  onPressed: () {                                           
    context.read(eleccionConSleccionStateNotifierProvider.notifier).CambiarSeleccion(eleccioneswatchCon[index].eleccion);
  },
  icon: Icon(
    eleccioneswatchCon[index].selec 
      ? Icons.check_box 
      : Icons.check_box_outline_blank,
  ),
)

内容的提问来源于stack exchange，提问作者Diego jiménez