如何在Flutter中创建支持上下滚动的无限列表？

Flutter没有内置直接支持负索引双向无限滚动的列表组件，但可以通过索引转换结合初始滚动偏移的方式实现需求，以下是具体方案：

核心思路 #

利用ListView.builder的现有特性，设置一个足够大的初始itemCount和初始滚动偏移，将列表的「中间位置」作为初始显示点，再把组件回调的非负索引转换为正负索引，以此模拟双向无限滚动的效果。

实现代码示例 #

import 'package:flutter/material.dart';

class BidirectionalInfiniteList extends StatefulWidget {
  const BidirectionalInfiniteList({super.key});

  @override
  State<BidirectionalInfiniteList> createState() => _BidirectionalInfiniteListState();
}

class _BidirectionalInfiniteListState extends State<BidirectionalInfiniteList> {
  // 设定足够大的基准值，用于计算初始滚动位置和转换索引
  static const int _baseOffset = 10000;
  // 固定item高度，方便精准计算滚动偏移
  static const double _itemHeight = 50;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      // 初始化滚动到中间位置，让用户可同时向上/向下滚动
      controller: ScrollController(
        initialScrollOffset: _baseOffset * _itemHeight,
      ),
      // 用2倍基准值作为itemCount，确保滚动范围足够大
      itemCount: _baseOffset * 2,
      itemExtent: _itemHeight,
      itemBuilder: (context, index) {
        // 将非负索引转换为包含负数的实际索引
        final actualIndex = index - _baseOffset;
        return Container(
          alignment: Alignment.center,
          height: _itemHeight,
          child: Text('Item $actualIndex'),
        );
      },
    );
  }
}

方案说明 #

1. 由于ListView.builder的索引始终从0开始，我们通过_baseOffset将回调的index转换为正负值——当index小于_baseOffset时，actualIndex就会是负数。
2. 初始滚动偏移设置为_baseOffset * _itemHeight，确保列表默认显示actualIndex=0的位置，用户可向上滚动查看负索引项，向下滚动查看正索引项。
3. 足够大的_baseOffset（比如10000）能保证用户几乎不可能滚动到列表两端，完全满足「无限滚动」的需求。

如果需要更灵活的实现（比如动态加载更多数据），可以结合滚动监听，在用户滚动到接近两端时调整_baseOffset并更新列表，不过上述方案已能覆盖大多数基础场景。

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