面试题：Flutter中Bloc模式下的State持久化与恢复

整体思路

选择存储方式：在Flutter中，可以使用shared_preferences插件将数据存储到本地。它提供了简单的键值对存储方式，适合存储Bloc的状态数据。
存储状态：在Bloc的dispose方法中，将当前的state数据转换为合适的格式（如JSON）并存储到本地。
恢复状态：在Bloc的初始化过程中，从本地读取存储的状态数据，并根据这些数据恢复到之前的state。

关键代码示例

添加依赖：在pubspec.yaml文件中添加shared_preferences依赖。

dependencies:
  shared_preferences: ^2.0.6

Bloc类修改：假设我们有一个简单的CounterBloc，以下是修改后的代码。

import 'package:bloc/bloc.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:equatable/equatable.dart';

part 'counter_event.dart';
part 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterInitial()) {
    on<IncrementEvent>((event, emit) {
      emit(CounterIncremented(state.counter + 1));
    });

    // 初始化时恢复状态
    _restoreState();
  }

  Future<void> _restoreState() async {
    final prefs = await SharedPreferences.getInstance();
    final counter = prefs.getInt('counter');
    if (counter != null) {
      add(SetInitialCounterEvent(counter));
    }
  }

  @override
  Future<void> dispose() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setInt('counter', state.counter);
    super.dispose();
  }
}

Event和State类：

// counter_event.dart
import 'package:equatable/equatable.dart';

abstract class CounterEvent extends Equatable {
  const CounterEvent();

  @override
  List<Object> get props => [];
}

class IncrementEvent extends CounterEvent {}

class SetInitialCounterEvent extends CounterEvent {
  final int initialCounter;
  const SetInitialCounterEvent(this.initialCounter);

  @override
  List<Object> get props => [initialCounter];
}

// counter_state.dart
import 'package:equatable/equatable.dart';

abstract class CounterState extends Equatable {
  const CounterState();

  @override
  List<Object> get props => [];
}

class CounterInitial extends CounterState {}

class CounterIncremented extends CounterState {
  final int counter;
  const CounterIncremented(this.counter);

  @override
  List<Object> get props => [counter];
}

Bloc事件处理：在BlocObserver中处理SetInitialCounterEvent事件。

class CounterBlocObserver extends BlocObserver {
  @override
  void onEvent(Bloc bloc, Object? event) {
    super.onEvent(bloc, event);
    if (event is SetInitialCounterEvent) {
      (bloc as CounterBloc).emit(CounterIncremented(event.initialCounter));
    }
  }
}

应用入口：设置BlocObserver。

void main() {
  Bloc.observer = CounterBlocObserver();
  runApp(const MyApp());
}

通过以上步骤，我们实现了在Flutter应用中使用Bloc模式时，页面销毁和重建时持久化Bloc的State并恢复数据。

面试题：Flutter中Bloc模式下的State持久化与恢复

知识考点

面试题答案

整体思路

关键代码示例