在SingleChildScrollView滚动时更新OverlayEntry位置的方案

我使用OverlayEntry结合Positioned组件构建自定义下拉菜单，相关代码如下：

OverlayEntry _createFloatingDropdown() {
  return OverlayEntry(builder: (context) {
    // yPosition = yPosition! + 56 - widget.scrollController.offset;
    return Positioned(
      left: xPosition,
      top: yPosition! + 56,
      width: width,
      height: height,
      child: Container(
        color: Colors.red,
        height: 200,
      ),
    );
  });
}

点击触发下拉菜单的逻辑代码：

return InkWell(
    key: actionkey,
    onTap: () {
      setState(() {
        if (isDropdownOpen) {
          floatingDropdown.remove();
        } else {
          findDropDownData();
          floatingDropdown = _createFloatingDropdown();
          Overlay.of(context)?.insert(floatingDropdown);
        }

        isDropdownOpen = !isDropdownOpen;
      });
    },

当前问题：该InkWell组件嵌套在SingleChildScrollView中，下拉菜单渲染后，滚动时位置不会更新，始终固定在屏幕同一位置。如何让OverlayEntry在滚动时更新或重建？

1. 监听滚动事件触发OverlayEntry重建 #

OverlayEntry不会自动响应滚动更新，需通过ScrollController监听滚动动作，手动触发重建并更新位置：

• 在打开下拉菜单时添加滚动监听，关闭时移除：

onTap: () {
  setState(() {
    if (isDropdownOpen) {
      floatingDropdown.remove();
      widget.scrollController.removeListener(_updateDropdownPosition);
    } else {
      findDropDownData();
      floatingDropdown = _createFloatingDropdown();
      Overlay.of(context)?.insert(floatingDropdown);
      widget.scrollController.addListener(_updateDropdownPosition);
    }
    isDropdownOpen = !isDropdownOpen;
  });
}

• 实现滚动监听方法，更新位置并强制重建：

void _updateDropdownPosition() {
  // 重新获取InkWell的当前屏幕位置
  final renderBox = actionkey.currentContext?.findRenderObject() as RenderBox;
  final offset = renderBox.localToGlobal(Offset.zero);
  
  setState(() {
    xPosition = offset.dx;
    yPosition = offset.dy;
  });
  floatingDropdown.markNeedsBuild(); // 触发OverlayEntry重建
}

2. 动态计算下拉菜单位置 #

避免使用初始点击时的固定坐标，每次重建OverlayEntry时都重新获取触发组件的实时位置：

修改_createFloatingDropdown方法：

OverlayEntry _createFloatingDropdown() {
  return OverlayEntry(builder: (context) {
    final renderBox = actionkey.currentContext?.findRenderObject() as RenderBox;
    final offset = renderBox.localToGlobal(Offset.zero);
    
    return Positioned(
      left: offset.dx,
      top: offset.dy + 56, // 保持原有的偏移量
      width: renderBox.size.width,
      height: 200,
      child: Container(
        color: Colors.red,
        height: 200,
      ),
    );
  });
}

3. 清理监听避免内存泄漏 #

在组件销毁时，移除滚动监听并清理OverlayEntry：

@override
void dispose() {
  if (isDropdownOpen) {
    widget.scrollController.removeListener(_updateDropdownPosition);
    floatingDropdown.remove();
  }
  super.dispose();
}

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