肘状态 return 始终为空值

Question

我正在学习 freezed 的 flutter-bloc，我正在尝试从 sqflite 检索数据。我实现了没有 bloc 模式，它工作正常。但是当我使用 bloc 这样做时，return 值始终为空！

单击此按钮时应该检索数据：

  BlocBuilder<DisplayNoteCubit, DisplayNoteState>(
                      builder: (context, state) {
                        return MaterialButton(
                          onPressed: () async {
                            print( '\n print all Data \n ${state.maybeMap(orElse: () {}, getData: (g) => g.notes)}');
                          },
                          child: const Text("Click Me"),
                        );
                      },
                    ),

集团代码为：

final DBHelper _db=DBHelper.instance;

class DisplayNoteCubit extends Cubit<DisplayNoteState> {
  DisplayNoteCubit() : super(const DisplayNoteState.initial());
  void  getData() {
    state.maybeMap(
        orElse: () {},
        getData: (getData) async{
          emit(getData.copyWith(notes:await  _db.getAllNotesFormDB()));
        });
  }
}

州代码为：

@freezed
abstract class DisplayNoteState with _$DisplayNoteState {
  const factory DisplayNoteState.initial() = Initial;
  const factory DisplayNoteState.getData({required List<Map<String, dynamic>> notes}) = GetData;
}

Answer 1

使用 Cubit 时，您的状态生命周期如下所示：

你在 Cubit 上调用了一个方法；
Cubit 处理该方法并发出新状态；
您的 UI 订阅状态并相应地重新呈现。

现在，您需要修复代码中的几个方面：

步骤1. BlocBuilder仅在需要订阅状态变化并根据当前状态渲染时使用UI。在您的情况下，您只想使用按钮执行该方法，因此在这种情况下不需要 BlocBuilder。

改变这个：

BlocBuilder<DisplayNoteCubit, DisplayNoteState>(
  builder: (context, state) {
    return MaterialButton(
      onPressed: () async {
        print( '\n print all Data \n ${state.maybeMap(orElse: () {}, getData: (g) => g.notes)}');
      },
      child: const Text("Click Me"),
    );
  },
),

对此：

return MaterialButton(
  onPressed: () async {
    context.read<DisplayNoteCubit>().getData(); // Triggers getData() method on Cubit
  },
  child: const Text("Click Me"),
);

第 2 步。 检索数据并发出状态变化。

改变这个：

final DBHelper _db=DBHelper.instance;

class DisplayNoteCubit extends Cubit<DisplayNoteState> {
  DisplayNoteCubit() : super(const DisplayNoteState.initial());
  void  getData() {
    state.maybeMap(
        orElse: () {},
        getData: (getData) async{
          emit(getData.copyWith(notes:await  _db.getAllNotesFormDB()));
        });
  }
}

对此：

final DBHelper _db=DBHelper.instance;

class DisplayNoteCubit extends Cubit<DisplayNoteState> {
  DisplayNoteCubit() : super(const DisplayNoteState.initial());

  Future<void> getData() async {
    final notes = await _db.getAllNotesFormDB();

    emit(DisplayNoteState.getData(notes: notes)); // Emits state with retrieved notes
  }
}

步骤 3. 渲染您的 UI。现在，您应该使用 BlocBuilder 方法来呈现您的状态。您可以像以前一样在此处使用 state.maybeMap()。例如：

BlocBuilder<DisplayNoteCubit, DisplayNoteState>(
  builder: (context, state) {
     return state.maybeMap(
       getData: (getDataState) { ... },
       orElse: () { ... },
     );
  },
),

肘状态 return 始终为空值

cubit state return always a null value

flutter

bloc

flutter-bloc

freezed

flutter-freezed