Flutter：如何使ListView对指针事件透明（但对非透明内容不透明）？

小编典典

Flutter：如何使ListView对指针事件透明（但对非透明内容不透明）？

flutter

我有一个Scrollable（ListView或其他任何一个），它包含一个透明的小部件，例如Container(height:200)。我可以同时看到小部件和可滚动控件（换句话说，可以看到可滚动控件后面的小部件）。

我如何能够单击透明小部件和可滚动控件，以便到达可滚动控件后面的小部件？

ListView(
  children: [
    Container(height: 200), // Transparent.
    Container(color: Colors.red, height: 200),
    ],
);

请注意，我不能IgnorePointer用来包装可滚动控件，因为我仍然想单击可滚动控件中的非透明窗口小部件。

阅读 417

2020-08-13

共1个答案

小编典典

我能想到的唯一合理的解决方案是GestureDetector在透明容器上放一个，它将为您提供水龙头的全局位置：

GestureDetector(
  onTapUp: (TapUpDetails tapUpDetails) {
    print("onTapUp global: " + tapUpDetails.globalPosition.toString());
  },

然后将a添加Key到列表后面的小部件，并使用它来获取小部件矩形的左上角的全局位置以及小部件的大小，并使用它们来获取小部件的矩形：

RenderBox renderBox = _key.currentContext.findRenderObject();
Offset topLeftCorner = renderBox.localToGlobal(Offset.zero);
Size size = renderBox.size;
Rect rectangle = topLeftCorner & size;

如果背景窗口小部件不移动，则可以initState使用WidgetsBinding.instance.addPostFrameCallback（在内同步执行渲染对象将在下一个帧内initState）进行保存，并保存Rect-否则您将不得不在每次点击时重新计算它。

然后最后在透明容器上的每个轻击上，您可以计算轻击的位置是否在背景小部件的边界内，并调用相应的代码：

// if tap is within boundaries of the background widget
if (rectangle.contains(tapUpDetails.globalPosition)) {
  // your code here
}

2020-08-13