如何根据屏幕可用空间动态定位Flutter OverlayEntry于按钮上下方

核心思路是：通过GlobalKey获取按钮的布局信息，结合屏幕尺寸计算按钮上下的可用空间，动态决定Overlay的显示位置和最大高度，避免溢出屏幕。

实现步骤 #

1. 获取按钮全局位置与屏幕信息
   给按钮绑定GlobalKey，点击时通过RenderBox拿到按钮的全局坐标、尺寸，同时获取屏幕的可用高度（扣除状态栏、导航栏）：

final GlobalKey _buttonKey = GlobalKey();

void _showOverlay() {
  final RenderBox buttonBox = _buttonKey.currentContext!.findRenderObject() as RenderBox;
  final Offset buttonOffset = buttonBox.localToGlobal(Offset.zero);
  final Size buttonSize = buttonBox.size;
  final screenHeight = MediaQuery.of(_buttonKey.currentContext!).size.height;
  final padding = MediaQuery.of(_buttonKey.currentContext!).padding;

  // 计算按钮上下的可用空间
  final spaceBelow = screenHeight - padding.bottom - buttonOffset.dy - buttonSize.height;
  final spaceAbove = buttonOffset.dy - padding.top;
}

2. 动态计算Overlay的位置与最大高度
   先预估内容的期望高度（如果是动态列表，可提前计算或设合理上限），再对比上下空间决定显示逻辑：

// 示例：假设内容期望高度，实际可根据动态内容调整
final desiredContentHeight = 300.0;
double maxOverlayHeight;
Offset overlayOffset;

if (spaceBelow >= desiredContentHeight) {
  // 下方空间充足，显示在按钮下方
  maxOverlayHeight = spaceBelow;
  overlayOffset = Offset(buttonOffset.dx, buttonOffset.dy + buttonSize.height);
} else if (spaceAbove >= desiredContentHeight) {
  // 上方空间充足，显示在按钮上方
  maxOverlayHeight = spaceAbove;
  overlayOffset = Offset(buttonOffset.dx, buttonOffset.dy - maxOverlayHeight);
} else {
  // 上下空间都不足，取较大的空间适配
  maxOverlayHeight = max(spaceAbove, spaceBelow);
  overlayOffset = spaceAbove > spaceBelow 
      ? Offset(buttonOffset.dx, buttonOffset.dy - maxOverlayHeight)
      : Offset(buttonOffset.dx, buttonOffset.dy + buttonSize.height);
}

3. 构建自适应OverlayEntry
   用ConstrainedBox限制最大高度，内部嵌套SingleChildScrollView保证内容可滚动，再通过Positioned定位：

final overlayEntry = OverlayEntry(
  builder: (context) => Positioned(
    left: overlayOffset.dx,
    top: overlayOffset.dy,
    width: buttonSize.width,
    child: ConstrainedBox(
      constraints: BoxConstraints(maxHeight: maxOverlayHeight),
      child: Material(
        elevation: 4,
        borderRadius: BorderRadius.circular(8),
        child: SingleChildScrollView(
          child: Column(
            // 替换成你的动态内容，比如列表、折叠面板等
            children: List.generate(15, (index) => ListTile(title: Text('选项 $index'))),
          ),
        ),
      ),
    ),
  ),
);

Overlay.of(context)!.insert(overlayEntry);

4. 处理内容动态变化
   如果内容高度会动态改变（比如展开/折叠、加载更多），可在Overlay内部用StatefulBuilder更新状态，必要时重新计算位置：

// 在Overlay的child中添加StatefulBuilder
child: StatefulBuilder(
  builder: (context, setState) => Column(
    children: [
      TextButton(
        onPressed: () {
          setState(() {
            // 更新内容状态，比如展开更多项
          });
          // 可选：重新计算高度并调整Overlay位置
          _updateOverlayPosition(overlayEntry);
        },
        child: Text('展开更多'),
      ),
      // 其他动态内容
    ],
  ),
)

关键注意点 #

• 确保获取RenderBox时按钮已完成布局（比如点击时按钮已渲染，或在postFrameCallback中执行逻辑）。
• 监听屏幕旋转、窗口大小变化，及时调整Overlay位置。
• 用GestureDetector监听空白区域，实现点击外部关闭Overlay的逻辑。

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