如何通过Provider.Consumer触发Bloc更新状态并刷新UI

需求：从SettingsPage返回后，触发新的服务器请求获取对应语言的数据并刷新UI。

当前实现逻辑：

• HomePage通过Consumer<LanguageProvider>监听语言变化，语言代码由LanguageProvider提供（该类监听sharedPreferences变化并发送通知）
• 语言更新时，Consumer会重新创建HomePageBloc并添加FetchTopicsEvent，但_fetchTopics方法未执行，导致UI无法刷新

现有代码 #

HomePage代码 #

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<LanguageProvider>(
        builder: (context, languageProvider, child) {
      return BlocProvider(
        create: (context) => HomePageBloc(
          getTerms: context.read<GetAllTerms>(),
          languageProvider: languageProvider,
        )..add(const FetchTopicsEvent()),
        child: const _Content(),
      );
    });
  }
}

HomePageBloc代码 #

class HomePageBloc extends Bloc<HomePageEvent, HomePageState> {
  HomePageBloc({
    required GetAllTerms getTerms,
    required LanguageProvider languageProvider,
  })  : _getAllTerms = getTerms,
        _languageProvider = languageProvider,
        super(const HomePageState()) {
    on<FetchTopicsEvent>(
      _fetchTopics,
      transformer: throttleDroppable(const Duration(milliseconds: 100)),
    );
  }

  final GetAllTerms _getAllTerms;
  final LanguageProvider _languageProvider;

  Future<void> _fetchTopics(event, Emitter<HomePageState> emit) async {
    emit(state.copyWith(status: HomePageStatus.loading));
    final list = await _getAllTerms(_languageProvider.getPrefLanguageCode());

    emit(
      state.copyWith(
        status: HomePageStatus.success,
        terms: list,
      ),
    );
  }
}

解决方案 #

方案1：让Bloc主动监听语言变化 #

修改HomePageBloc，在构造函数中监听LanguageProvider的变化，语言更新时自动触发数据请求：

class HomePageBloc extends Bloc<HomePageEvent, HomePageState> {
  HomePageBloc({
    required GetAllTerms getTerms,
    required LanguageProvider languageProvider,
  })  : _getAllTerms = getTerms,
        _languageProvider = languageProvider,
        super(const HomePageState()) {
    on<FetchTopicsEvent>(
      _fetchTopics,
      transformer: throttleDroppable(const Duration(milliseconds: 100)),
    );

    // 监听LanguageProvider的变化
    _languageProvider.addListener(_onLanguageChanged);
    // 初始化时触发一次请求
    add(const FetchTopicsEvent());
  }

  final GetAllTerms _getAllTerms;
  final LanguageProvider _languageProvider;

  void _onLanguageChanged() {
    // 语言更新时触发数据请求
    add(const FetchTopicsEvent());
  }

  Future<void> _fetchTopics(event, Emitter<HomePageState> emit) async {
    emit(state.copyWith(status: HomePageStatus.loading));
    final list = await _getAllTerms(_languageProvider.getPrefLanguageCode());

    emit(
      state.copyWith(
        status: HomePageStatus.success,
        terms: list,
      ),
    );
  }

  @override
  Future<void> close() {
    // 移除监听，避免内存泄漏
    _languageProvider.removeListener(_onLanguageChanged);
    return super.close();
  }
}

同时调整HomePage，无需每次Consumer重建都创建新Bloc：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => HomePageBloc(
        getTerms: context.read<GetAllTerms>(),
        languageProvider: context.read<LanguageProvider>(),
      ),
      child: const _Content(),
    );
  }
}

方案2：在Consumer中触发已有Bloc的事件 #

如果Bloc在父级已提供，可在语言变化时直接获取已有Bloc并发送事件：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => HomePageBloc(
        getTerms: context.read<GetAllTerms>(),
        languageProvider: context.read<LanguageProvider>(),
      )..add(const FetchTopicsEvent()),
      child: Consumer<LanguageProvider>(
        builder: (context, languageProvider, child) {
          // 语言变化时触发Bloc事件
          context.read<HomePageBloc>().add(const FetchTopicsEvent());
          return const _Content();
        },
      ),
    );
  }
}

关键问题分析 #

原代码的核心问题是：每次语言变化时都会创建新的HomePageBloc，但可能因为短时间内重复创建、throttle拦截或状态未及时传递，导致事件未执行。通过让Bloc主动监听语言变化，或复用已有Bloc触发事件，可避免重复重建Bloc，确保数据请求和UI刷新正常执行。

内容的提问来源于stack exchange，提问作者José L Crisostomo Sánchez