在 Flutter 中，定位的 Widget 怎么能感觉到在其父 Stack 区域之外的点击？

Question

A Stack 在 Positioned.

中包含 MyWidget

Stack(
  overflow: Overflow.visible,
  children: [
    Positioned(
    top: 0.0,
    left: 0.0,
    child: MyWidget(),
  )],
);

由于溢出是Overflow.visible，而MyWidget比Stack大，所以它显示在Stack之外，这就是我想要的。

但是，我无法点击位于 Stack 区域之外的 MyWidget 区域。它只是忽略了那里的水龙头。

如何确保 MyWidget 接受那里的手势？

Answer 1

好的，我做了一个解决方法，基本上我在父级上添加了一个 GestureDetector 并实现了 onTapDown。此外，您还必须使用 GlobalKey 跟踪您的 Widget 以获取当前位置。

当检测到父级别的 Tap 时，请检查点击位置是否在您的小部件内。

下面的代码：

final GlobalKey key = new GlobalKey();

      void onTapDown(BuildContext context, TapDownDetails details) {
        final RenderBox box = context.findRenderObject();
        final Offset localOffset = box.globalToLocal(details.globalPosition);
        final RenderBox containerBox = key.currentContext.findRenderObject();
        final Offset containerOffset = containerBox.localToGlobal(localOffset);
        final onTap = containerBox.paintBounds.contains(containerOffset);
        if (onTap){
          print("DO YOUR STUFF...");
        }
      }

      @override
      Widget build(BuildContext context) {
        return GestureDetector(
          onTapDown: (TapDownDetails details) => onTapDown(context, details),
          child: Container(
            color: Colors.red,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Align(
              alignment: Alignment.topLeft,
                      child: SizedBox(
                width: 200.0,
                height: 400.0,
                child: Container(
                  color: Colors.black,
                    child: Stack(
                      overflow: Overflow.visible,
                      children: [
                        Positioned(
                          top: 0.0, left: 0.0,
                                          child: Container(
                            key: key,
                            width: 500.0,
                            height: 200.0,
                            color: Colors.blue,
                          ),
                        ),
                      ],
                    ),

                ),
              ),
            ),
          ),
        );
      }

Answer 2

我遇到了类似的问题。基本上，由于堆栈的子项不使用完全溢出的框大小进行命中测试，所以我使用了嵌套堆栈和任意大的高度，以便我可以捕获嵌套堆栈溢出框的点击。不确定它是否适合你，但这里什么都没有:)

所以在你的例子中，也许你可以尝试类似的东西

Stack(
  clipBehavior: Clip.none,
  children: [
    Positioned(
    top: 0.0,
    left: 0.0,
    height : 500.0 // biggest possible child size or just very big 
    child: Stack(
      children: [MyWidget()]
    ),
  )],
);

Answer 3

出现此行为是因为堆栈在检查子项是否被击中之前检查指针是否在其范围内：

Class：RenderBox（RenderStack 扩展）

bool hitTest(BoxHitTestResult result, { @required Offset position }) {

    ...

    if (_size.contains(position)) {
      if (hitTestChildren(result, position: position) || hitTestSelf(position)) {
        result.add(BoxHitTestEntry(this, position));
        return true;
      }
    }
    return false;
}

我的解决方法是删除

if (_size.contains(position))

检查。不幸的是，如果不从框架中复制代码，这是不可能的。

这是我所做的：

复制堆栈 class 并将其命名为 Stack2
复制了 RenderStack 并将其命名为 RenderStack2
使 Stack2 引用 RenderStack2
从上面添加了没有 _size.contains 检查的 hitTest 方法
复制 Positioned 并将其命名为 Positioned2 并使其引用 Stack2 作为其通用参数
在我的代码中使用了 Stack2 和 Positioned2

这个解决方案绝不是最优的，但它达到了预期的效果。

Answer 4

可以考虑使用继承复制hitTest方法打破命中规则，例子

class Stack2 extends Stack {
  Stack2({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit fit = StackFit.loose,
    Overflow overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
  }) : super(
          key: key,
          alignment: alignment,
          textDirection: textDirection,
          fit: fit,
          overflow: overflow,
          children: children,
        );

  @override
  RenderStack createRenderObject(BuildContext context) {
    return RenderStack2(
      alignment: alignment,
      textDirection: textDirection ?? Directionality.of(context),
      fit: fit,
      overflow: overflow,
    );
  }
}

class RenderStack2 extends RenderStack {
  RenderStack2({
    List<RenderBox> children,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit fit = StackFit.loose,
    Overflow overflow = Overflow.clip,
  }) : super(
          children: children,
          alignment: alignment,
          textDirection: textDirection,
          fit: fit,
          overflow: overflow,
        );

  @override
  bool hitTest(BoxHitTestResult result, {Offset position}) {
    if (hitTestChildren(result, position: position) || hitTestSelf(position)) {
      result.add(BoxHitTestEntry(this, position));
      return true;
    }
    return false;
  }
}

Answer 5

可以通过使用 OverlayEntry 小部件作为 Stack 的父级来解决此限制（因为 OverlayEntry 填满了整个屏幕，所有子级也都经过了命中测试）。这是一个proof of concept solution on DartPad.

创建一个 returns 未来的自定义小部件：

    Widget build(BuildContext context) {
    Future(showOverlay);
    return Container();
  }

这个未来应该删除任何以前的 OverlayEntry 实例并插入 Stack 和您的自定义小部件：

  void showOverlay() {
    hideOverlay();
    RenderBox? renderBox = context.findAncestorRenderObjectOfType<RenderBox>();

    var parentSize = renderBox!.size;
    var parentPosition = renderBox.localToGlobal(Offset.zero);

    overlay = _overlayEntryBuilder(parentPosition, parentSize);
    Overlay.of(context)!.insert(overlay!);
  }

  void hideOverlay() {
    overlay?.remove();
  }

使用生成器函数生成 Stack:

 OverlayEntry _overlayEntryBuilder(Offset parentPosition, Size parentSize) {  
    return OverlayEntry(
      maintainState: false,
      builder: (context) {
        return Stack(
          clipBehavior: Clip.none,
          children: [
            Positioned(
              left: parentPosition.dx + parentSize.width,
              top: parentPosition.dy + parentSize.height,
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  onTap: () {},
                  child: Container(),
                ),
              ),
            ),
          ],
        );
      },
    );
  }

在 Flutter 中，定位的 Widget 怎么能感觉到在其父 Stack 区域之外的点击？

In Flutter, how can a positioned Widget feel taps outside of its parent Stack area?

gesture

flutter

flutter-layout