CustomScrollView异步加载问题：聊天界面旧消息无动画位移需求

我在使用CustomScrollView实现聊天界面时，已设置reverse: true，但异步添加新消息到列表底部时，旧消息会出现不必要的动画位移。想要实现类似Telegram的效果：当用户没有停留在最新消息位置时，旧消息保持当前位置不动；只有用户在最新消息位置时，新消息才自动跟进显示。

核心解决方案 #

要实现这个效果，关键是在添加新消息前后判断并控制滚动位置：

• 添加新消息前：记录当前滚动位置和是否处于「最新消息位置」（即reverse模式下滚动偏移量接近0）
• 添加新消息后：根据之前的状态，要么保持原滚动位置，要么自动滚动到最新消息

具体实现步骤 #

1. 记录滚动状态
   在获取新消息的异步逻辑中，先保存当前滚动控制器的状态：

// 添加新消息前，判断是否处于最新消息位置（留10像素容错空间）
final isAtBottom = view.chatScrollController.offset <= 10;
final currentOffset = view.chatScrollController.offset;
// 计算新消息的总高度（用于精确调整偏移量）
double newMessagesTotalHeight = 0;
for (final msg in newMessages) {
  newMessagesTotalHeight += _calculateMessageHeight(msg);
}

2. 更新消息并调整滚动位置
   添加新消息到列表后，通过addPostFrameCallback在UI更新后调整滚动：

// 将新消息插入到列表开头（reverse=true时，列表开头对应界面底部的最新消息）
state.messages.insertAll(0, newMessages);
state.notify();

WidgetsBinding.instance.addPostFrameCallback((_) {
  if (isAtBottom) {
    // 原本就在底部，直接跳转到最新消息位置
    view.chatScrollController.jumpTo(0);
  } else {
    // 不在底部，计算新偏移量以保持旧消息位置不变
    final newMaxExtent = view.chatScrollController.position.maxScrollExtent;
    final oldMaxExtent = newMaxExtent - newMessagesTotalHeight;
    final newOffset = newMaxExtent - (oldMaxExtent - currentOffset);
    view.chatScrollController.jumpTo(newOffset);
  }
});

3. 优化CustomScrollView配置
   移除shrinkWrap: true（聊天界面通常占满可用空间，该属性会导致列表频繁重算尺寸引发位移），并调整缓存范围：

CustomScrollView(
  key: PageStorageKey(widget.chatroom.roomIdParams),
  cacheExtent: 200, // 增大缓存，避免旧消息被过早回收
  physics: const BouncingScrollPhysics(),
  controller: view.chatScrollController,
  reverse: true,
  // 移除shrinkWrap: true
  slivers: [
    const SizedBox(height: 20).sliver,
    // ... 其他sliver组件
  ],
)

额外注意点 #

• 如果消息高度是动态的，_calculateMessageHeight方法需要根据消息内容（文本长度、图片尺寸等）预估高度，或使用GlobalKey获取实际渲染高度
• 更新未读消息计数时，仅当用户不在底部时才增加计数，保持逻辑一致性

内容的提问来源于stack exchange，提问作者Am Koem Heang