Flutter Bloc问题：BlocBuilder仅首次重建后续不更新的原因排查

我为学习Bloc框架开发了一款小型笔记应用，目前遇到异常问题：BlocBuilder仅在状态从NoteInitial切换至NoteOpen时会重建界面，后续切换不同内容的NoteOpen状态时，尽管状态实例并不相等，但界面始终不刷新。

相关代码及调试信息 #

存在问题的BlocBuilder代码 #

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<NoteBloc, NoteState>(
      buildWhen: (previous, current) => true,
        builder: (context, state) {
          if (state is NoteInitial) {
            return _noNoteSelected(state);
          }
          return _displayNote(state as NoteOpen);
        }
    );
  }

  // 其余代码省略 
}

NoteBloc实现 #

class NoteBloc extends Bloc<NoteEvent, NoteState> {
  NoteBloc() : super(NoteInitial()) {
    on<NoteSelected>(_onNoteSelected);
  }

  Future<void> _onNoteSelected(
    NoteSelected event,
    Emitter<NoteState> emit,
  ) async {
    await NotesFilesLoader().load(event.fileSummary).then((note) => emit(NoteOpen(note: note)));
  }
}

状态定义 #

sealed class NoteState extends Equatable {
  @override
  List<Object?> get props => [];
}

class NoteInitial extends NoteState {}

class NoteOpen extends NoteState {
  final Note note;

  NoteOpen({required this.note});


  @override
  String toString() {
    return 'NoteOpen{note: ${note.title}}';
  }

  @override
  List<Object?> get props => [note.title]; //仅使用笔记标题进行相等性检查
}

父组件 #

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        scrollbarTheme: ScrollbarThemeData(
          thumbVisibility: MaterialStateProperty.all<bool>(true),
        ),
      ),
      home: Scaffold(
        body: SafeArea(
          child: BlocProvider(
            create: (context) => NoteBloc(), //在此创建bloc
            child: VerticalSplitView(
              ratio: 0.25,
              left: const FilesExplorerPage(),
              right: Editor(), //存在问题的BlocBuilder位于此处
            ),
          ),
        ),
      ),
    );
  }
}

触发事件的组件 #

class _FilesExplorerState extends State<FilesExplorer> {
  int? _selectedIndex;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<FileExplorerCubit, List<FileSummary>>(
        builder: (context, state) {
      return Container(
        color: Colors.grey,
        child: state.isEmpty ? _loadingFiles(context) : _buildFileList(state),
      );
    });
  }

  ListView _buildFileList(List<FileSummary> fileSummaries) {
    return ListView.builder(
      padding: const EdgeInsets.only(left: 5, top: 3),
      itemCount: fileSummaries.length,
      itemBuilder: (context, index) => MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          onTap: () {
            context.read<NoteBloc>().add(NoteSelected(fileSummary: fileSummaries[index])); //在此触发事件
            setState(() => _selectedIndex = index);
          },
          child: _selectedIndex == index
              ? _selectedContainer(Text(fileSummaries[index].title))
              : Text(fileSummaries[index].title),
        ),
      ),
    );
  }

  // 省略代码
}

全局调试Observer #

class DebugObserver extends BlocObserver {

  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);

    print("Equals? ${change.currentState == change.nextState}");
    print('${bloc.runtimeType} $change');
  }
}

调试输出 #

flutter: NoteBloc Change { currentState: NoteOpen{note: Welcome Note}, nextState: NoteOpen{note: How To Use The App} }
flutter: Equals? false
flutter: NoteBloc Change { currentState: NoteOpen{note: How To Use The App}, nextState: NoteOpen{note: Welcome Note} }
flutter: Equals? false
flutter: NoteBloc Change { currentState: NoteOpen{note: Welcome Note}, nextState: NoteOpen{note: How To Use The App} }
flutter: Equals? false
flutter: NoteBloc Change { currentState: NoteOpen{note: How To Use The App}, nextState: NoteOpen{note: Welcome Note} }

问题原因及解决方案 #

核心原因 #

从调试输出可以确认：Bloc已经正确发射了不同的NoteOpen状态，且状态相等性判断为false，说明Bloc层面的状态流转没有问题。问题出在UI层的_displayNote方法实现，导致Flutter认为Widget树没有变化，因此不触发重建。

常见问题点：

1. _displayNote未直接使用传入的NoteOpen状态中的note属性构建UI，而是依赖外部未更新的变量。
2. 使用const修饰需要动态更新的Widget（比如const Text(note.title)），导致内容变化时Widget不会重建。
3. Note类的属性未正确作为Widget的依赖项（比如使用可变属性但未在Widget中显式引用）。

修复步骤 #

1. 修正_displayNote实现，确保直接使用NoteOpen状态的note属性构建UI，示例：

Widget _displayNote(NoteOpen state) {
  return Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          state.note.title,
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 12),
        Expanded(
          child: SingleChildScrollView(
            child: Text(state.note.content),
          ),
        ),
      ],
    ),
  );
}

2. 移除动态Widget的const修饰：如果_displayNote中有带const的文本或容器，去掉const，确保Flutter能感知内容变化。

3. 调试验证：在BlocBuilder的builder函数中添加打印语句，确认每次状态变化时builder是否被调用：

builder: (context, state) {
  print("Builder triggered with state: $state"); // 调试用
  if (state is NoteInitial) {
    return _noNoteSelected(state);
  }
  return _displayNote(state as NoteOpen);
}

如果打印正常但UI未更新，说明问题在_displayNote的Widget构建逻辑；如果打印未输出，再排查BlocProvider作用域或状态流转问题。

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