Flutter Web如何实现滚动到底部触发页面刷新？

针对你的场景，pull_to_refresh_flutter3的上拉加载手势在Web端体验适配性较差，可通过监听ListView滚动事件实现滚动到底部自动触发加载，同时保留移动端原有上拉功能。具体实现如下：

1. 导入平台判断工具 #

确保导入flutter/foundation.dart用于区分平台：

import 'package:flutter/foundation.dart';

2. 配置滚动控制器与加载状态 #

在homeViewModel中添加滚动控制器和加载状态标记，避免重复触发请求：

// homeViewModel内新增
final ScrollController scrollController = ScrollController();
bool isLoading = false;

// 初始化时绑定滚动监听
void initScrollListener() {
  scrollController.addListener(() {
    // 仅在Web端且未处于加载状态时执行
    if (kIsWeb && !isLoading) {
      final maxScroll = scrollController.position.maxScrollExtent;
      final currentScroll = scrollController.position.pixels;
      // 当剩余滚动距离小于200时触发加载（阈值可根据需求调整）
      if (maxScroll - currentScroll <= 200) {
        loadMoreRequestedTask();
      }
    }
  });
}

// 修改原有加载方法，增加状态控制
Future<void> loadMoreRequestedTask() async {
  if (isLoading) return;
  isLoading = true;
  try {
    // 执行你的API请求逻辑
    await fetchMoreTasks();
    // 更新列表数据并通知UI刷新
    notifyListeners(); // 若使用ChangeNotifier状态管理
  } finally {
    isLoading = false;
  }
}

3. 根据平台切换UI组件 #

在页面层，根据平台选择对应的加载触发组件：

// 替换原SmartRefresher代码
kIsWeb
    ? ListView.builder(
        controller: homeViewModel.scrollController,
        shrinkWrap: true,
        itemCount: homeViewModel.taskList.length,
        itemBuilder: (BuildContext context, int index) {
          return TaskCardView(
            taskList: homeViewModel.taskList,
            index: index,
          );
        },
      )
    : SmartRefresher(
        controller: homeViewModel.refreshRequestedTask,
        enablePullDown: false,
        enablePullUp: true,
        footer: const ClassicFooter(
          loadStyle: LoadStyle.ShowWhenLoading,
        ),
        onLoading: () => homeViewModel.loadMoreRequestedTask(),
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: homeViewModel.taskList.length,
          itemBuilder: (BuildContext context, int index) {
            return TaskCardView(
              taskList: homeViewModel.taskList,
              index: index,
            );
          },
        ),
      )

4. 清理资源避免内存泄漏 #

在页面销毁时释放滚动控制器：

@override
void dispose() {
  homeViewModel.scrollController.dispose();
  super.dispose();
}

此方案让移动端保留原有的上拉加载体验，Web端则适配滚动到底部自动加载的操作习惯，同时通过加载状态标记避免重复请求。

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