Flutter CustomScrollView新增顶部元素时保持滚动偏移问题咨询

CustomScrollView的center属性本质是将绑定key对应的Sliver的顶部设置为滚动坐标系的0锚点，每次Sliver树重绘时（比如上方SliverList新增元素触发重建），Flutter都会强制调整滚动位置保证锚点位置符合预期，这才会出现后台新增元素时自动跳转到第二个SliverList顶部的问题。

推荐放弃使用center属性实现「加载新元素后停在旧列表顶部」的需求，改为手动控制滚动偏移，同时兼容后台静默加载的场景，具体实现步骤如下：

• 第一步：移除CustomScrollView的center参数绑定
• 第二步：区分加载触发场景：
  1. 用户主动下拉到列表顶部触发加载：加载完成后，手动计算所有新增元素的总高度，调用scrollController.jumpTo(当前偏移 + 新增总高度)，即可实现用户视觉上滚动位置不变、停在旧列表顶部的效果
  2. 后台静默下载新元素：不需要调整滚动偏移，用户当前滚动位置会自然保持不变
• 第三步：新增顶部新消息提示：监听newElements数组的长度变化，只要当前滚动偏移大于0、且有新元素新增，就显示悬浮提示条，用户点击后可滚动到顶部查看新内容。

修改后的参考代码 #

// 可以提前定义NewElement的固定高度，动态高度可以单独实现高度计算逻辑
const double _kNewElementHeight = 80.0;

CustomScrollView(
  // 移除center参数
  controller: widget.scrollController,
  physics: const AlwaysScrollableScrollPhysics(),
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) => NewElement(),
        childCount: newElements?.length ?? 0,
      ),
    ),
    SliverList(
      key: _mainListKey,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) => OldElement(),
        childCount: oldElements.length,
      ),
    ),
  ],
)

// 主动触发加载新元素的逻辑示例
void onUserPullToRefresh() async {
  final int oldNewLength = newElements?.length ?? 0;
  // 执行加载逻辑获取新数据
  final newData = await fetchNewElements();
  // 更新bloc数据
  bloc.add(UpdateNewElements(newData));
  // 计算新增高度
  final addedHeight = (newData.length - oldNewLength) * _kNewElementHeight;
  // 调整滚动偏移
  widget.scrollController.jumpTo(widget.scrollController.offset + addedHeight);
}

// 后台静默加载逻辑示例
void onBackgroundFetchNewElements() async {
  final newData = await fetchNewElements();
  // 仅更新数据，不调整滚动偏移
  bloc.add(UpdateNewElements(newData));
  // 判断当前是否不在顶部，显示新消息提示
  if (widget.scrollController.offset > 0) {
    showTopNewTip();
  }
}

如果你的NewElement是动态高度，可以使用automatic_keep_alive配合每个元素的GlobalKey获取渲染后的高度，再累加计算总偏移即可。

内容的提问来源于stack exchange，提问作者Dominik Šimoník