Flutter Bloc无限滚动问题：新数据加载时ListView自动滚顶的解决

问题根源 #

1. 状态切换导致ListView重建：每次触发加载时，Bloc先emit了UserLoadingState，导致BlocBuilder重建并返回加载状态的Text组件，原ListView被销毁，ScrollController失去关联。当新数据加载完成emitUserLoadedState时，新的ListView重新创建，ScrollController绑定到新列表后默认滚动到顶部。
2. Bloc状态逻辑异常：emitUserLoadingState后，异步加载完成时的状态判断逻辑存在漏洞，可能导致重复emit状态，进一步加剧UI不稳定。

修复方案 #

1. 修改UserState结构 #

给UserLoadedState添加isLoading字段，用它来标记加载状态，不再单独使用UserLoadingState：

class UserLoadedState extends UserState {
  final List<UserData> users;
  final bool isLoading;

  UserLoadedState({required this.users, this.isLoading = false});
}

2. 重构Bloc事件处理逻辑 #

移除单独的加载状态，在UserLoadedState内维护加载状态，避免切换状态导致ListView销毁：

on<FetchUserEvent>((event, emit) async {
  // 初始加载逻辑
  if (state is UserInitialState) {
    emit(UserLoadedState(users: [], isLoading: true));
    final List<UserData> users = await userRepository.getUsers();
    emit(UserLoadedState(users: users, isLoading: false));
  } 
  // 加载更多逻辑
  else if (state is UserLoadedState) {
    final currentState = state as UserLoadedState;
    // 防止重复触发加载
    if (!currentState.isLoading) {
      emit(UserLoadedState(users: currentState.users, isLoading: true));
      final List<UserData> newUsers = await userRepository.getUsers();
      emit(UserLoadedState(
        users: [...currentState.users, ...newUsers],
        isLoading: false,
      ));
    }
  }
});

3. 调整HomeScreen的UI渲染逻辑 #

不再处理UserLoadingState，直接在UserLoadedState中根据isLoading显示底部加载指示器：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Infinite Scroll'),
    ),
    body: BlocBuilder<UserBloc, UserState>(
      builder: (context, state) {
        if (state is UserInitialState) {
          return const Center(child: Text('初始状态'));
        }

        if (state is UserLoadedState) {
          return ListView.builder(
            controller: _scrollController,
            itemCount: state.users.length + (state.isLoading ? 1 : 0),
            itemBuilder: (context, index) {
              if (index >= state.users.length) {
                return const Center(child: CircularProgressIndicator());
              }
              return ListTile(
                title: Text(state.users[index].name.toString()),
              );
            },
          );
        }

        return const Text('未知状态');
      },
    ),
  );
}

4. 优化滚动监听逻辑 #

增加加载状态判断，避免同一时间多次触发加载请求：

_scrollController.addListener(() {
  if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
    final currentState = context.read<UserBloc>().state;
    if (currentState is UserLoadedState && !currentState.isLoading) {
      context.read<UserBloc>().add(FetchUserEvent());
    }
  }
});

修复原理 #

通过在UserLoadedState内维护加载状态，确保ListView始终存在于界面中，ScrollController的滚动位置不会因组件重建而丢失，从根本上解决自动滚顶问题；同时增加重复加载判断，避免不必要的请求和状态异常。

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