Flutter：解决懒加载分页后列表跳转至顶部的问题

问题场景 #

基于HTTP服务器构建大数据集的分页列表，使用lazy_load_scrollview包实现底部触发加载更多功能，但加载新数据时列表会自动跳回第一条记录。

问题根源 #

你的代码存在两个核心问题导致滚动位置重置：

• 数据源引用被替换：每次加载新数据时，通过fullList = List.from(fullList)..addAll(dataList);创建新List实例，ListView会认为数据源完全更新，从而重置滚动位置到顶部。
• 状态更新时机错误：加载完数据后更新fullList的操作未包裹在setState中，导致UI更新不及时；同时isLoading的状态更新与数据源更新分离，易引发UI异常。

修复方案 #

1. 直接在原列表追加数据，保留引用 #

将更新fullList的代码修改为直接在原列表上添加新数据，避免替换整个列表引用：

// 替换原有的数据更新逻辑
final newData = parseJson(response.body);
setState(() {
  fullList.addAll(newData);
  isLoading = false;
});

2. 统一管理状态更新 #

将所有需要触发UI更新的操作都放在setState内部，确保状态与UI同步。修改后的loadData方法完整代码：

void loadData() async {
  setState(() {
    isLoading = true;
  });

  if (totalRecords == 0) {
    final response2 = await http.get(
      Uri.parse('http://192.168.0.8:88/searchcustomer_gettotal' +
          '?userID=' +
          globals.userID.toString() +
          '&token=' +
          globals.token +
          '&name=' +
          _searchItemController.text),
      headers: {
        "Content-type": "application/json",
        "Accept": "application/json",
        "Connection": "Keep-Alive",
      },
    );
    Map<String, dynamic> totalMap = convert.jsonDecode(response2.body);
    var total = totals.fromJson(totalMap);
    totalRecords = total.total;
    var t = totalRecords / recordsPerPage;
    if (totalRecords < recordsPerPage) {
      totalPages = 1;
    } else if (totalRecords % recordsPerPage == 0) {
      totalPages = t.round();
    } else {
      var t = totalRecords / recordsPerPage;
      totalPages = t.round() + 1;
    }
    print(totalRecords);
  }

  final response = await http.get(
    Uri.parse('http://192.168.0.8:88/searchcustomer' +
        '?userID=' +
        globals.userID.toString() +
        '&token=' +
        globals.token +
        '&name=' +
        _searchItemController.text +
        '&pageno=' +
        currentPage.toString() +
        '&perpage=' +
        recordsPerPage.toString()),
    headers: {
      "Content-type": "application/json",
      "Accept": "application/json",
      "Connection": "Keep-Alive",
    },
  );

  final newData = parseJson(response.body);
  setState(() {
    fullList.addAll(newData);
    isLoading = false;
  });
}

3. 可选：为ListView添加稳定Key（若仍有异常） #

如果修改后偶尔仍出现滚动位置异常，可为ListView.builder添加基于数据长度的Key，帮助ListView正确识别数据变化：

ListView.builder(
  key: Key('list-${fullList.length}'),
  itemCount: fullList.length,
  itemBuilder: (BuildContext context, int index) {
    return dataCard(context, fullList, index);
  },
)

修复原理 #

• 直接调用fullList.addAll()保持数据源引用不变，ListView只会渲染新增项，不会重置滚动位置。
• 统一在setState中管理状态更新，确保UI与状态同步，避免异步操作导致的状态不一致问题。

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