Flutter SliverList如何在加载新数据时保留滚动位置？

要实现和Twitter时间线一致的效果——在头部添加新数据时保留当前滚动位置，核心是在数据更新后调整滚动控制器的偏移量，抵消新增内容带来的位置变化。以下是具体实现方案：

步骤1：优化列表代理与列表项Key #

将SliverChildListDelegate替换为SliverChildBuilderDelegate，并给每个列表项设置唯一Key，确保Flutter能正确复用列表项，提升性能：

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      final timeline = hometimelineController.data[index];
      final sellTellWidget = _sellTellBuilder.buildSellTellWidget(timeline);
      // 给列表项设置唯一Key，基于timeline的唯一标识（比如id）
      return RowHeaderSellTellWrapper(
        key: ValueKey(timeline.id),
        name: "Durdja Djuric",
        email: "@djurdjadjuric",
        sellTell: sellTellWidget,
      );
    },
    childCount: hometimelineController.data.length,
    // 帮助Flutter快速找到列表项位置，优化复用
    findChildIndexCallback: (Key key) {
      final ValueKey<String> valueKey = key as ValueKey<String>;
      return hometimelineController.data.indexWhere((item) => item.id == valueKey.value);
    },
  ),
)

步骤2：添加下拉刷新逻辑 #

用RefreshIndicator包裹CustomScrollView，实现头部下拉加载新数据的交互：

body: RefreshIndicator(
  onRefresh: _loadNewTimelineData,
  child: CustomScrollView(
    key: const PageStorageKey(0),
    controller: _listScrollController,
    slivers: [
      // 保留原来的SliverAppBar和其他Sliver组件
      SliverAppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.transparent.withOpacity(0.4),
        title: Builder(builder: (context) {
          return SellTellTitle(
            onPressed: () => Scaffold.of(context).openDrawer(),
            userLogged: signInController.logged,
          );
        }),
        floating: true,
        expandedHeight: 50,
        pinned: false,
        snap: false,
      ),
      // 替换后的SliverList
      SliverList(...),
    ],
  ),
),

步骤3：实现加载并保持滚动位置的核心逻辑 #

在_loadNewTimelineData方法中，完成数据加载、高度计算和滚动偏移调整：

Future<void> _loadNewTimelineData() async {
  // 1. 记录当前滚动偏移量
  final currentOffset = _listScrollController.offset;
  final screenWidth = MediaQuery.of(context).size.width;

  // 2. 加载新数据（替换为你的API请求逻辑）
  final newData = await yourApiService.fetchNewTimelineItems();

  // 3. 计算新增列表项的总高度
  double totalNewItemsHeight = 0;
  for (final item in newData) {
    // 构建新增的列表项Widget
    final itemWidget = RowHeaderSellTellWrapper(
      name: "Durdja Djuric",
      email: "@djurdjadjuric",
      sellTell: _sellTellBuilder.buildSellTellWidget(item),
    );
    // 临时布局Widget以获取真实高度
    final renderObject = itemWidget.createElement().renderObject as RenderBox;
    renderObject.layout(BoxConstraints.loose(Size(screenWidth, double.infinity)));
    totalNewItemsHeight += renderObject.size.height;
  }

  // 4. 将新数据插入到列表头部
  setState(() {
    hometimelineController.data.insertAll(0, newData);
  });

  // 5. 等待列表更新后，调整滚动位置
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (currentOffset == 0) {
      // 若原本在列表顶部，加载后保持在新的顶部
      _listScrollController.jumpTo(0);
    } else {
      // 非顶部位置，偏移量加上新增内容总高度，保持原浏览位置
      _listScrollController.jumpTo(currentOffset + totalNewItemsHeight);
    }
  });
}

关键说明 #

• 高度测量：因为列表项高度不一致，必须通过临时布局来获取每个新增项的真实高度，确保滚动偏移调整准确。
• 滚动偏移调整：新增内容会把原有列表项向下推，因此将原偏移量加上新增内容总高度，就能让用户停留在原来的浏览位置。
• 顶部特殊处理：如果用户原本在列表顶部，加载新数据后直接跳转到新的顶部，符合Twitter的交互逻辑。

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