具有可点击背景的颤振覆盖答案

【问题标题】：Flutter overlay with clickable background具有可点击背景的颤振覆盖
【发布时间】：2021-04-10 04:09:52
【问题描述】：

我正在尝试将小部件放置在其他所有内容之上。

我有这个代码工作

PageRouteBuilder(
    opaque: false,
    barrierColor: Colors.transparent,  
    pageBuilder: (BuildContext context, __, _) {
      return Align(
        child: Container(
          width: 500,
          height: 500,
          color: Colors.black,             
        ),
      ); // Scaffold
    },
  ),

问题是屏障不允许点击它后面的元素。我可以将dismissable设置为true或false，但即使false和barrierColor: null，屏障后面的元素也是不可点击的。

我确定必须有一个合适的小部件，我添加了一个示例图像，当覆盖层可见时，我需要单击Button 1、Button 2等。

我不能使用Stack

【问题讨论】：

你的问题不是很清楚。你能添加一些视觉效果来更好地理解吗？
@JigarPatel 我在顶部有一个水平菜单栏。即使 PageRouteBuilder 添加的容器打开，我也希望能够仍然单击菜单项。原因太长解释不了，需要用到PageRouteBuilder

标签： flutter flutter-layout

【解决方案1】：

你需要的是 OverlayEntry：

class OverlayWidget {
  static void show({@required BuildContext context, @required String message}) {
    OverlayEntry overlayEntry = new OverlayEntry(builder: (context) {
      return Positioned(
          top: MediaQuery.of(context).size.height / 2,
          width: 500, 
          height: 500,
          child:  Center(
                child: Container(
                  width: 500,
                  height: 500,
                  color: Colors.black,
                ),
          ));
    });
    Overlay.of(context).insert(overlayEntry);

// remove entry whatever you want, in this case entry will be removed after 2sec
//    new Future.delayed(Duration(seconds: 2)).then((value) {
//      overlayEntry.remove();
//    });
  }
}

【讨论】：

这有完全相同的问题
再试一次，我已经修改答案了

【解决方案2】：

尝试像这样用IgnorePointer 小部件包装Align。

return IgnorePointer(
      child: Align(
        child: Container(
          width: 500,
          height: 500,
        ),
      ),
    );

【讨论】：

我添加了一张图片来举例说明
@JgarPatel 我编辑了整个问题，以更清楚地说明我需要什么。谢谢
您尝试过IgnorePointer 吗？
是的，IgnorePointer 使得忽略容器上的指针，而不是屏障上的指针，这与我需要的相反。