Flutter中如何让OverlayEntry相对于屏幕指定Widget居中显示

方案1：快速适配（适合静态位置场景） #

不需要提前计算动态文本宽度，借助FractionalTranslation组件即可实现自动偏移对齐，仅需修改OverlayEntry部分代码：

late final entry = OverlayEntry(
  builder: (context) => Positioned(
    top: renderedOffset.dy + renderedSize.height,
    // 保留原有的目标组件中心x坐标计算逻辑
    left: renderedOffset.dx + (renderedSize.width / 2),
    // 新增FractionalTranslation层，向左偏移自身宽度的50%
    child: FractionalTranslation(
      translation: const Offset(-0.5, 0),
      child: Text(
        widget.message ?? 'Test',
        textAlign: TextAlign.center,
      ),
    ),
  ),
);

原理：FractionalTranslation的偏移量是相对于子组件自身尺寸的比例，Offset(-0.5, 0)会在文本布局完成后自动向左偏移自身宽度的一半，刚好让文本中心和目标组件的中心垂直对齐。

方案2：通用稳定方案（推荐，支持动态位置场景） #

如果MyIcon位于可滚动容器内、或者位置会动态变化，手动计算坐标容易出现偏移，推荐使用Flutter官方提供的跨组件跟随对齐能力，完全不需要手动计算任何坐标：

1. 在State中定义全局唯一的LayerLink实例：

final _layerLink = LayerLink();

2. 修改build方法，给组件外层套上CompositedTransformTarget并绑定LayerLink：

@override
Widget build(BuildContext context) {
  Widget icon = Padding(
    padding: const EdgeInsets.symmetric(horizontal: 10),
    child: Icon(widget.icon),
  );
  if (widget.action != null) {
    icon = GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        widget.action?.call();
        _showTooltip();
      },
      child: icon,
    );
  }
  return CompositedTransformTarget(
    link: _layerLink,
    child: icon,
  );
}

3. 修改OverlayEntry构造逻辑，用CompositedTransformFollower实现自动对齐：

late final entry = OverlayEntry(
  builder: (context) => CompositedTransformFollower(
    link: _layerLink,
    // 目标组件的对齐锚点：底部中心
    targetAnchor: Alignment.bottomCenter,
    // 提示文本的对齐锚点：顶部中心，刚好和目标锚点对齐
    followerAnchor: Alignment.topCenter,
    // 可自定义二者的间距，这里设置为顶部留白4dp
    offset: const Offset(0, 4),
    child: Text(
      widget.message ?? 'Test',
      textAlign: TextAlign.center,
    ),
  ),
);

原理：两个组件通过同一个LayerLink绑定，框架会自动处理位置计算，无论目标组件如何滚动、移动，提示文本都会始终保持在目标组件正下方居中的位置。

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