如何通过ListView.Builder实现滚动后渲染剩余List Tile

核心问题分析 #

你之前用0-1和>=2的条件分支渲染，没有把加载状态的进度指示器纳入列表的总项数计算，导致进度条根本没有被列入渲染队列，自然不会显示。正确的做法是把加载状态作为额外的列表项来处理，同时通过滚动监听触发API请求。

实现步骤与代码 #

以下是完整的可运行示例（基于Flutter）：

1. 状态管理与初始化

需要维护几个关键状态：已加载的列表数据、是否正在加载、是否还有更多数据，同时通过ScrollController监听滚动位置。

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

  @override
  State<LazyLoadList> createState() => _LazyLoadListState();
}

class _LazyLoadListState extends State<LazyLoadList> {
  final ScrollController _scrollController = ScrollController();
  List<ListItem> _listItems = [];
  bool _isLoading = false;
  bool _hasMoreData = true;

  @override
  void initState() {
    super.initState();
    // 初始化加载2个初始项
    _loadInitialItems();
    // 添加滚动监听
    _scrollController.addListener(_handleScroll);
  }

  // 加载初始的2个列表项
  void _loadInitialItems() {
    setState(() {
      _listItems = [
        ListItem(id: 1, title: "初始项 1"),
        ListItem(id: 2, title: "初始项 2"),
      ];
    });
  }

  // 触发API加载更多数据（由Adapter处理请求与映射）
  Future<void> _loadMoreData() async {
    if (_isLoading || !_hasMoreData) return;
    
    setState(() {
      _isLoading = true;
    });

    try {
      // 调用你的Adapter获取数据
      final newItems = await YourDataAdapter.fetchRemainingItems();
      
      if (newItems.isEmpty) {
        setState(() {
          _hasMoreData = false;
        });
      } else {
        setState(() {
          _listItems.addAll(newItems);
        });
      }
    } catch (e) {
      // 这里可以添加错误提示逻辑
      debugPrint("加载失败: $e");
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  // 滚动监听：当滚动到接近底部时触发加载
  void _handleScroll() {
    final threshold = _scrollController.position.maxScrollExtent - 200;
    if (_scrollController.position.pixels >= threshold) {
      _loadMoreData();
    }
  }

2. 列表渲染逻辑

列表总项数 = 已加载数据长度 +（加载中则加1），在itemBuilder中区分渲染列表项和进度指示器：

@override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      // 关键：把加载状态的进度条算入总项数
      itemCount: _listItems.length + (_isLoading ? 1 : 0),
      itemBuilder: (context, index) {
        if (index < _listItems.length) {
          // 渲染常规List Tile
          return ListTile(
            title: Text(_listItems[index].title),
            subtitle: Text("ID: ${_listItems[index].id}"),
          );
        } else {
          // 渲染进度指示器
          return const Padding(
            padding: EdgeInsets.symmetric(vertical: 16),
            child: Center(child: CircularProgressIndicator()),
          );
        }
      },
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

// 模拟你的数据模型和Adapter
class ListItem {
  final int id;
  final String title;

  ListItem({required this.id, required this.title});
}

class YourDataAdapter {
  // 模拟API请求与数据映射
  static Future<List<ListItem>> fetchRemainingItems() async {
    await Future.delayed(const Duration(seconds: 1));
    return List.generate(5, (i) => ListItem(id: i+3, title: "API加载项 ${i+3}"));
  }
}

关键修复点 #

1. 总项数计算：不再用固定的0-1、>=2分支，而是动态计算_listItems.length + (_isLoading ? 1 : 0)，确保进度指示器能被渲染。
2. 滚动触发时机：设置合理的阈值（比如距离底部200px），提前触发加载，提升用户体验。
3. 防重复请求：在_loadMoreData开头判断_isLoading和_hasMoreData，避免同一时间多次调用API。

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