在Flutter中如何实现带下拉刷新和分页加载的列表？

题目

在Flutter中如何实现带下拉刷新和分页加载的列表？

信息

• 类型：问答
• 难度：⭐⭐

考点

状态管理,异步请求,ListView优化,ScrollController,分页逻辑

快速回答

实现核心步骤：

1. 使用RefreshIndicator包裹ListView.builder实现下拉刷新
2. 通过ScrollController监听滚动位置触发分页加载
3. 结合FutureBuilder管理异步数据状态
4. 维护isLoading和hasMore状态防止重复请求
5. 分页请求时更新数据并合并新旧列表

核心实现原理

下拉刷新通过Material Design的RefreshIndicator组件实现，触发时重新加载第一页数据。分页加载则需监听ListView滚动位置：当滚动到底部时，自动加载下一页数据，通过ScrollController计算位置实现。

代码示例

class PaginatedList extends StatefulWidget {
  @override
  _PaginatedListState createState() => _PaginatedListState();
}

class _PaginatedListState extends State<PaginatedList> {
  final ScrollController _scrollController = ScrollController();
  final List<Item> _items = [];
  int _page = 1;
  bool _isLoading = false;
  bool _hasMore = true;

  @override
  void initState() {
    super.initState();
    _loadData();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == 
          _scrollController.position.maxScrollExtent) {
        _loadData();
      }
    });
  }

  Future<void> _loadData() async {
    if (_isLoading || !_hasMore) return;

    setState(() => _isLoading = true);

    try {
      final newItems = await fetchItems(page: _page);
      setState(() {
        _items.addAll(newItems);
        _isLoading = false;
        _hasMore = newItems.isNotEmpty;
        _page++;
      });
    } catch (e) {
      setState(() => _isLoading = false);
    }
  }

  Future<void> _refresh() async {
    setState(() {
      _page = 1;
      _items.clear();
      _hasMore = true;
    });
    await _loadData();
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView.builder(
        controller: _scrollController,
        itemCount: _items.length + (_hasMore ? 1 : 0),
        itemBuilder: (ctx, index) {
          if (index == _items.length) {
            return Center(child: CircularProgressIndicator());
          }
          return ListTile(title: Text(_items[index].title));
        },
      ),
    );
  }
}

最佳实践

• 防抖处理：通过_isLoading标志位防止重复请求
• 空状态处理：当_hasMore为false时隐藏加载指示器
• 性能优化：使用ListView.builder按需构建子项
• 错误处理：在catch中重置状态并展示错误提示
• 组件分离：将列表项封装为独立Widget提高可维护性

常见错误

• ❌ 忘记移除ScrollController监听（需在dispose()中调用_scrollController.dispose()）
• ❌ 未处理异步请求竞态条件（快速多次触发导致数据错乱）
• ❌ 分页参数未重置（下拉刷新后页码应重置为1）
• ❌ 未检测hasMore导致无限请求空页
• ❌ 直接修改原列表而非setState更新（需创建新列表）

扩展知识

• 高级分页库：infinite_scroll_pagination提供更完善的分页方案
• 状态管理：复杂场景建议使用Bloc或Riverpod管理分页状态
• 性能监测：使用DevTools的Performance视图检测列表滚动帧率
• 懒加载优化：对于图片列表使用ListView的cacheExtent属性预加载区域
• 替代方案：ScrollNotification监听滚动事件实现分页（灵活性更高）