Flutter ListView.builder无更多数据时仍持续滚动问题求助

数据库中有2条帖子，当前代码可正常展示，但这2条帖子仅占屏幕一半，本无需滚动。然而ListView.builder在帖子移出屏幕后仍能持续滚动，仿佛可以无限滚动。使用的代码如下：

void _scrollListener() {
  if (!_isLoading) {
    if (controller.position.pixels == controller.position.maxScrollExtent) {
      setState(() => _isLoading = true);
      getTopicPosts();
    }
  }
} 

RefreshIndicator(
  child: ListView.builder(
    physics: const BouncingScrollPhysics(),
    controller: controller,
    itemBuilder: (context,int index) {
      if (index < postsWidgets.length) {
        return postsWidgets[index];
      } else {
        return Center(
          child: new Opacity(
          opacity:_isLoading? 1:0.0,
          child: new SizedBox(
            width: 32.0,
            height: 32.0,
              child: new CircularProgressIndicator()),
          ),
        );
      }
    },
  ),
  onRefresh: () async {
    if(!_isLoading) {
    postsWidgets.clear();
    lastVisible=null;
    await getTopicPosts();
    }
  },
),

核心问题是未给ListView.builder设置itemCount属性，且你的itemBuilder处理了超出postsWidgets长度的index，导致ListView默认认为列表有无限项，从而允许无限滚动。

1. 添加上itemCount限制列表项数量 #

修改ListView.builder，添加itemCount，值为现有帖子数量加上加载状态下的1个加载指示器：

ListView.builder(
  physics: const BouncingScrollPhysics(),
  controller: controller,
  // 添加这一行，限制列表总项数
  itemCount: postsWidgets.length + (_isLoading ? 1 : 0),
  itemBuilder: (context,int index) {
    if (index < postsWidgets.length) {
      return postsWidgets[index];
    } else {
      return Center(
        child: Opacity(
          opacity:_isLoading? 1:0.0,
          child: SizedBox(
            width: 32.0,
            height: 32.0,
            child: CircularProgressIndicator()),
        ),
      );
    }
  },
),

这样列表只会渲染现有帖子+加载时的指示器，不会产生无限滚动的情况。

2. 优化滚动监听，避免无数据时重复加载 #

建议添加一个_hasReachedEnd变量标记是否已加载完所有数据，防止在没有更多帖子时仍触发加载：

// 先定义变量
bool _hasReachedEnd = false;

void _scrollListener() {
  // 增加_hasReachedEnd判断，无数据时停止触发加载
  if (!_isLoading && !_hasReachedEnd) {
    if (controller.position.pixels == controller.position.maxScrollExtent) {
      setState(() => _isLoading = true);
      getTopicPosts();
    }
  }
}

// 在getTopicPosts获取数据后，判断是否有新数据
Future<void> getTopicPosts() async {
  // 你的数据请求逻辑...
  final newPosts = await fetchPosts();
  if (newPosts.isEmpty) {
    setState(() {
      _hasReachedEnd = true;
      _isLoading = false;
    });
    return;
  }
  // 否则添加新数据
  setState(() {
    postsWidgets.addAll(newPosts);
    _isLoading = false;
  });
}

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