Flutter ListView插入元素后保持原项目滚动位置的方法

问题场景 #

你有一个item高度固定为50的ListView，初始列表为[1,2,3,...,100]，滚动偏移为0时显示item1。在索引0处插入[-5,-4,-3,-2,-1,0]后，ListView自动跳转到顶部显示item-5，需要保持滚动位置在原来的item1处。

解决方案 #

插入6个元素后，原来的item1被推至索引6的位置，它的顶部距离ListView顶部的距离变为6 * 50 = 300。我们需要在列表更新完成后，手动调整滚动控制器的偏移量到该值。注意不能直接在插入元素后立刻设置偏移，需等待UI重建完成后执行，否则会因ListView未更新而失效，可通过WidgetsBinding.instance.addPostFrameCallback实现延迟执行。

修改后的代码示例：

// 假设scrollController是已初始化的ScrollController
List<int> list = [1,2,3,4,5,6 ... ,100];
const itemHeight = 50;

// 插入元素并保持滚动位置的方法
void insertItems() {
  final insertedCount = 6;
  // 插入目标元素
  list.insertAll(0, [-5,-4,-3,-2,-1,0]);
  // 等待UI更新后调整滚动位置
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final newOffset = insertedCount * itemHeight;
    // 直接跳转至目标位置
    scrollController.jumpTo(newOffset);
    // 若需要平滑滚动，可替换为以下代码：
    // scrollController.animateTo(
    //   newOffset,
    //   duration: const Duration(milliseconds: 300),
    //   curve: Curves.easeInOut,
    // );
  });
}

原理说明 #

插入元素后，ListView会重新计算布局，原来的item1的位置被新插入元素占据了前置空间。通过计算插入元素的总高度并设置滚动偏移量，可让原来的item1回到ListView可视区域顶部，保持与插入前一致的显示位置。

若item高度不固定，可通过Scrollable.ensureVisible方法定位原item对应的RenderObject并滚动到目标位置，但本场景中item高度固定，直接计算偏移量的方式更高效。

内容的提问来源于stack exchange，提问作者Trần Văn Hiếu