使用NotificationListener检测列表滚动到底部遇重复触发及回拉检测问题

我有一个展示有限条目的水平ListView，希望用户滚动至列表末尾（右侧）后继续滑动时，触发加载下一批数据的操作，于是用NotificationListener来实现，但目前遇到两个问题：

• 到达列表边缘时，边缘事件会被多次触发
• 不知道如何检测用户将列表往回拉的动作

当前实现代码：

@override
  Widget build(BuildContext context) {
    return Container(
      height: 430,
      child: NotificationListener<ScrollNotification>(
        child: ListView.builder(
          controller: controller,
          physics: const AlwaysScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          itemCount: widget.resList.length,
          itemBuilder: (BuildContext ctx, int index) {
            return GestureDetector(
              onTap: null,
              child: ReservationListTile(),
            );
          },
        ),
        onNotification: (ScrollNotification notification) {
          print(notification.metrics.pixels);
          if (notification.metrics.atEdge) {
            
            if (notification.metrics.pixels == 0) {
              print('At left');
            } else {
              print('At right');
            }
          }
          return true;
        },
      ),
    );
  }

解决方法 #

要解决事件重复触发，同时精准检测滚动方向和边缘操作，可以从以下几点入手：

• 添加加载状态锁：定义布尔变量_isLoading，初始为false，触发加载时设为true，加载完成后再设为false，避免重复触发请求。
• 精准判断滚动动作：通过ScrollUpdateNotification的scrollDelta判断滚动方向，结合边缘状态触发加载：
  当滚动到右侧边缘（notification.metrics.pixels == notification.metrics.maxScrollExtent）、滚动delta为正（用户仍在尝试右滑）且不在加载状态时，才执行加载逻辑。
• 检测回拉动作：通过scrollDelta < 0判断用户正在往左侧（回拉）滚动，在此处处理回拉相关逻辑。

修改后的代码示例：

bool _isLoading = false;

@override
Widget build(BuildContext context) {
  return Container(
    height: 430,
    child: NotificationListener<ScrollNotification>(
      child: ListView.builder(
        controller: controller,
        physics: const AlwaysScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        itemCount: widget.resList.length,
        itemBuilder: (BuildContext ctx, int index) {
          return GestureDetector(
            onTap: null,
            child: ReservationListTile(),
          );
        },
      ),
      onNotification: (ScrollNotification notification) {
        // 仅处理滚动更新事件，过滤冗余通知
        if (notification is ScrollUpdateNotification) {
          final metrics = notification.metrics;
          // 触发右侧边缘加载逻辑
          if (metrics.atEdge && metrics.pixels == metrics.maxScrollExtent) {
            if (notification.scrollDelta! > 0 && !_isLoading) {
              _isLoading = true;
              _loadMoreData().then((_) {
                _isLoading = false;
              });
            }
          }
          // 检测回拉（左滑）动作
          if (notification.scrollDelta! < 0) {
            print('用户正在往回拉');
            // 此处添加回拉相关处理逻辑
          }
        }
        return true;
      },
    ),
  );
}

// 模拟加载数据的方法，替换为实际请求逻辑
Future<void> _loadMoreData() async {
  await Future.delayed(const Duration(seconds: 1));
  // setState(() {
  //   widget.resList.addAll(newData);
  // });
}

额外说明 #

• 使用ScrollUpdateNotification而非通用ScrollNotification，可以过滤掉滚动开始/结束等冗余事件，减少无效判断。
• 加载状态锁是核心，能避免用户快速滑动时触发多次加载请求，防止数据重复或异常。
• 若需要更精细化的滚动控制，也可以使用ScrollController的addListener方法结合position属性判断，但NotificationListener的方式更灵活，无需额外绑定控制器逻辑。

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