将触摸事件推迟到堆栈中的小部件

Question

我正在尝试重新创建像 this

这样的 UI 导航

为此，我有一个

Stack

，地图位于背景中，顶部有一个

PageView

，中间页面设置为空，还有

HitTestBehavior.translucent

，让触摸事件由下面的地图处理。

    return Scaffold(
        body: Stack(children: [
      Container(
          color: Colors.grey,
          child: Center(
            child: FlatButton(
              onPressed: () {
                print("button pressed");
              },
              child: Text("Press me"),
            ),
          )),
      PageView(
        controller: _pageController,
        children: <Widget>[
          Container(
            color: Colors.red,
          ),
          GestureDetector(
            behavior: HitTestBehavior.translucent,
          ),
          Container(
            color: Colors.blue,
          ),
        ],
      )
    ]));

但是，这似乎不起作用，即使浏览量在中间页面，浏览量下方的按钮也无法触摸。

有什么想法吗？这是解决这个问题的正确方法吗？

Answer 1

看看这个包

https://pub.dev/packages/defer_pointer

你会得到这样的东西：

return DeferredPointerHandler( // handler
  child: Scaffold(
    body: Stack(
      children: [
        Container(
            color: Colors.grey,
            child: Center(
              child: DeferPointer( // pointer
                child: ElevatedButton(
                  onPressed: () {
                    print("button pressed");
                  },
                  child: Text("Press me"),
                ),
              ),
            )),
        PageView(
          controller: _pageController,
          children: <Widget>[
            Container(
              color: Colors.red,
            ),
            Container(
              color: Colors.blue,
            ),
          ],
        )
      ],
    ),
  ),
);