ListView.builder添加新项时如何保持当前滚动位置？双向聊天分页求助

针对你遇到的双向分页场景下，ListView向上加载旧消息时滚动条跳回顶部的问题，这里提供两个准确可行的方案，无需复杂的高度计算：

方案一：固定Item高度时直接计算偏移 #

如果聊天消息Item高度固定，这是最简洁的解决方式：

• 给ListView绑定ScrollController
• 加载旧消息（往列表头部插入数据）前，记录当前滚动偏移量和列表现有Item数量
• 数据加载完成后，基于新增Item数量和固定高度计算新偏移量，手动恢复滚动位置

示例代码：

final ScrollController _scrollController = ScrollController();
int _messageCount = 20;
final double _fixedItemHeight = 65; // 你的消息Item固定高度

void _loadOldMessages() async {
  // 记录加载前的状态
  final double currentOffset = _scrollController.offset;
  final int oldItemCount = _messageCount;

  // 模拟接口请求加载旧消息
  await Future.delayed(const Duration(milliseconds: 800));
  setState(() {
    _messageCount += 10; // 新增10条旧消息
  });

  // 计算并恢复滚动位置
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final double newOffset = currentOffset + (_messageCount - oldItemCount) * _fixedItemHeight;
    _scrollController.jumpTo(newOffset);
  });
}

// ListView 构建代码
ListView(
  controller: _scrollController,
  reverse: false,
  itemExtent: _fixedItemHeight, // 必须设置固定高度
  children: List.generate(_messageCount, (index) {
    return Container(
      alignment: Alignment.centerLeft,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Text('消息 ${_messageCount - index}'),
    );
  }),
)

方案二：动态高度Item时用GlobalKey跟踪位置 #

如果消息Item高度不固定，通过跟踪当前可见Item的GlobalKey来恢复滚动位置：

• 给每个Item分配唯一的GlobalKey
• 加载旧消息前，找到当前视口中第一个可见Item的Key
• 数据加载完成后，通过Key定位到该Item的渲染对象，计算偏移并恢复位置

示例代码：

final ScrollController _scrollController = ScrollController();
List<Message> _messages = List.generate(20, (i) => Message(id: i, content: '消息 $i'));
final Map<int, GlobalKey> _itemKeys = {};

@override
void initState() {
  super.initState();
  // 初始化Item的GlobalKey
  _messages.forEach((msg) => _itemKeys[msg.id] = GlobalKey());
}

void _loadOldMessages() async {
  // 找到当前视口中第一个可见的Item的Key
  GlobalKey? targetKey;
  final renderBox = _scrollController.context.findRenderObject() as RenderBox?;
  if (renderBox != null) {
    for (final child in renderBox.children) {
      if (child is RenderBox && child.hasSize) {
        final offset = child.localToGlobal(Offset.zero);
        if (offset.dy >= 0) {
          final context = child.owner!.contextFor(child);
          targetKey = context?.widget.key as GlobalKey?;
          break;
        }
      }
    }
  }

  // 模拟加载旧消息并插入列表头部
  await Future.delayed(const Duration(milliseconds: 800));
  final newOldMessages = List.generate(10, (i) => Message(id: _messages.length + i, content: '旧消息 ${_messages.length + i}'));
  setState(() {
    _messages.insertAll(0, newOldMessages);
    // 给新消息添加GlobalKey
    newOldMessages.forEach((msg) => _itemKeys[msg.id] = GlobalKey());
  });

  // 恢复滚动位置
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (targetKey == null) return;
    final targetRenderBox = targetKey!.currentContext?.findRenderObject() as RenderBox?;
    if (targetRenderBox != null) {
      final offset = targetRenderBox.localToGlobal(Offset.zero, ancestor: renderBox);
      _scrollController.jumpTo(_scrollController.offset + offset.dy);
    }
  });
}

// 消息实体类
class Message {
  final int id;
  final String content;
  Message({required this.id, required this.content});
}

// ListView 构建代码
ListView(
  controller: _scrollController,
  reverse: false,
  children: _messages.map((msg) {
    return Container(
      key: _itemKeys[msg.id],
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(msg.content),
          // 模拟动态高度内容
          Text('动态高度附加内容 ${msg.id}', style: const TextStyle(fontSize: 12)),
        ],
      ),
    );
  }).toList(),
)

双向分页适配提示 #

两个方案都兼容双向分页需求：

• 向下加载新消息时，因为是往列表尾部添加数据，ListView默认不会改变滚动位置，无需额外处理
• 向上加载旧消息时，用上述方法即可保持当前滚动位置

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