相对于父级的位置的颤动叠加

Question

我有一个列表视图。当我单击列表视图每个元素上的按钮时，我试图创建一个覆盖层，但我找不到一种方法来制作相对于 ListView 中项目的位置的覆盖层。

我的代码（从 stackoverflow 中的一些答案复制而来）是这样的

InkWell(          
      onTap: () {            
        return Overlay.of(context).insert(OverlayEntry(builder: (context) {
          return Align(
            child: Container(
              width: 56,
              height: 56,                
              child: Material(
                color: Colors.transparent,
                child: GestureDetector(
                  onTap: () => print('ON TAP OVERLAY!'),
                  child: Container(
                    decoration: BoxDecoration(
                        shape: BoxShape.circle, color: Colors.redAccent),
                  ),
                ),
              ),
            ),
          );
        }));           
      },
      child: Icon(
        Icons.arrow_back,
        color: Colors.black,
        size: 34,
      ),
    ),

有没有办法使位置相对于列表视图中的元素（最好是动态的，所以如果我滚动列表，覆盖层将与列表项一起滚动）

非常感谢

Answer 1

您可以使用渲染框来查找父级的位置。

然后使用“定位”将叠加层移动到该位置。

final targetRenderBox = context.findRenderObject() as RenderBox;
final position = targetRenderBox.localToGlobal(Offset.zero);

return OverlayPortal(
  controller: controller,
  overlayChildBuilder: (context) {
    return Positioned(
      top: position.dy,
      left: position.dx,
      child: Text('Overlay'),
    );
  },
  child: child,
);