颤动：忽略Widget上的触摸事件

Question

我希望在其他小部件的顶部上有一个模糊的图像，但是，当我这样做时，我无法与它下面的小部件进行交互。

Answer 1

解决方案

您可以通过IgnorePointer包围Widget来解决您的互动问题（无法与模糊图片下方的BackdropFilter互动）。

这意味着此处IgnorePointer是解决方案，因为它将忽略作为其子项传递的Widget的所有触摸事件。

IgnorePointer(child: BackdropFilter(...),)

您可以通过更改bool的<{1}}值来调整此属性：

ignoring

这将启用所有触摸事件。

吸收

在这里看一些有趣但与问题无关的是AbsorbPointer IgnorePointer(ignoring: false, ...) ，可用于反映所有触摸事件发生在其子自身上。

Answer 2

您可以使用IgnorePointer或AbsorbPointer。

示例（IgnorePointer）

IgnorePointer(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Unclickable button"),
  ),
);

示例（AbsorbPointer）

AbsorbPointer(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Unclickable button"),
  ),
);

---

有什么区别？

如果您的主窗口小部件下面有一个窗口小部件也可以接收点击事件，并且您在父窗口小部件上使用IgnorePointer，则子窗口小部件仍将接收点击事件。

但是在主窗口小部件上使用AbsorbPointer将不允许其他窗口小部件（在主窗口小部件下方）接收其点击事件。

显示差异的示例。

@override
Widget build(BuildContext context) {
  return SizedBox(
    width: double.infinity,
    child: Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          width: 250,
          child: RaisedButton(
            color: Colors.red,
            onPressed: () => print("Button 1"),
            child: Text("Button 1"),
          ),
        ),
        Positioned(
          right: 0,
          width: 250,
          child: IgnorePointer( // replace this with AbsorbPointer and button 1 won't receive click
            child: RaisedButton(
              onPressed: () => print("Button 2"),
              child: Text("Button 2"),
            ),
          ),
        ),
      ],
    ),
  );
}