Flutter中如何获取ScrollView内元素在页面中的正确位置？

1. 给每个列表项分配独立的GlobalKey #

绝对不能给所有列表项共用同一个GlobalKey，滚动复用Widget时，共用Key会导致获取到错误的RenderBox，直接引发位置计算混乱。在构建列表项时为每个消息生成唯一Key：

ListView.builder(
  itemCount: messages.length,
  itemBuilder: (context, index) {
    // 为每个消息项创建独立的GlobalKey，也可以提前绑定到消息对象上
    final itemKey = GlobalKey();
    return MessageItem(
      key: itemKey,
      message: messages[index],
      onTriggerOverlay: () => _calcItemPosition(itemKey),
    );
  },
)

2. 监听滚动事件实时更新位置 #

仅在addPostFrameCallback中计算位置是不够的，滚动过程中列表项的屏幕位置会持续变化，需要通过滚动控制器监听滚动动作，实时重新计算：

late ScrollController _scrollController;

@override
void initState() {
  super.initState();
  _scrollController = ScrollController();
  // 添加滚动监听，触发位置更新
  _scrollController.addListener(_updateOverlayPos);
}

@override
void dispose() {
  _scrollController.removeListener(_updateOverlayPos);
  _scrollController.dispose();
  super.dispose();
}

void _updateOverlayPos() {
  // 重新计算当前目标项的位置
  _calcItemPosition(_targetItemKey);
}

3. 正确计算屏幕全局位置 #

如果需要Overlay跟随列表项的屏幕位置，直接使用localToGlobal即可，但要确保每次滚动后都重新计算：

void _calcItemPosition(GlobalKey itemKey) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final RenderBox? itemBox = itemKey.currentContext?.findRenderObject() as RenderBox?;
    if (itemBox == null) return;

    // 获取列表项的屏幕全局坐标
    final globalPos = itemBox.localToGlobal(Offset.zero);
    // 若需适配状态栏，可减去安全区域顶部高度
    // final safeTop = MediaQuery.of(context).padding.top;
    // final adjustedPos = globalPos.translate(0, -safeTop);

    setState(() {
      position = globalPos;
    });

    // 若使用OverlayEntry，需主动标记重建以更新位置
    _overlayEntry?.markNeedsBuild();
  });
}

4. 可选：计算列表项在视口中的相对位置 #

如果需要获取列表项相对于滚动视口的位置（比如距离视口顶部的距离），结合滚动组件的RenderBox和滚动偏移计算：

void _calcViewportRelativePos(GlobalKey itemKey, GlobalKey listKey) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final RenderBox? itemBox = itemKey.currentContext?.findRenderObject() as RenderBox?;
    final RenderBox? listBox = listKey.currentContext?.findRenderObject() as RenderBox?;
    if (itemBox == null || listBox == null) return;

    // 计算列表项相对于滚动组件的坐标
    final relativeToList = itemBox.localToGlobal(Offset.zero, ancestor: listBox);
    // 滚动组件的当前偏移量
    final scrollOffset = _scrollController.offset;
    // 列表项在视口中的垂直位置（reverse=false时适用）
    final viewportY = relativeToList.dy - scrollOffset;

    setState(() {
      position = Offset(0, viewportY);
    });
  });
}

额外优化：判断列表项是否在视口内 #

当列表项滚出屏幕时，自动隐藏Overlay避免位置异常：

bool _isItemInViewport(RenderBox itemBox, RenderBox listBox) {
  final itemRect = itemBox.localToGlobal(Offset.zero, ancestor: listBox) & itemBox.size;
  final viewportRect = Offset(0, _scrollController.offset) & listBox.size;
  return viewportRect.overlaps(itemRect);
}

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