Flutter Bloc搜索文本框随状态变化重复加载问题求助

你的问题根源在于BlocBuilder包裹了整个包含TextFormField的Column，每次Bloc状态更新时，BlocBuilder的builder方法会重新执行，导致TextFormField被强制重建。

具体解决方案 #

• 缩小BlocBuilder的作用范围，只让列表部分跟随Bloc状态更新重建，把搜索框放在BlocBuilder外部。
• 确保搜索框的TextEditingController在build方法外初始化（比如State类的initState中），避免每次build都重新创建控制器。

修改后的代码示例 #

class _YourSearchPageState extends State<YourSearchPage> {
  late YourSearchBloc _bloc;
  late TextEditingController _searchController;

  @override
  void initState() {
    super.initState();
    _bloc = YourSearchBloc();
    _searchController = TextEditingController();
  }

  @override
  void dispose() {
    _bloc.close();
    _searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider<YourSearchBloc>(
      create: (context) => _bloc,
      child: Scaffold(
        appBar: AppBar(leading: leading),
        body: Column(
          children: [
            // 搜索框脱离BlocBuilder，不受状态更新影响
            TextFormField(
              controller: _searchController,
              onChanged: (filterKey) {
                // 原始列表应存在Bloc内部，无需从外部state传入
                _bloc.add(SearchEvent(filterKey));
              },
            ),
            // 仅列表部分跟随Bloc状态重建
            Expanded(
              child: BlocBuilder<YourSearchBloc, SearchState>(
                bloc: _bloc,
                builder: (context, state) {
                  return ListView.builder(
                    itemCount: state.filteredList.length,
                    itemBuilder: (context, index) {
                      return ListTile(title: Text(state.filteredList[index].toString()));
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

额外提示 #

• 原始列表数据应该存储在Bloc内部，不要依赖外部状态传入事件，这样更符合Bloc的单向数据流设计。
• 务必在dispose方法中关闭Bloc和销毁控制器，避免内存泄漏。

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