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

Question

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

Answer 1

解

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

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

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

您可以通过更改bool的ignoring值来调整此属性：

IgnorePointer(ignoring: false, ...)

这将再次启用所有触摸事件。

Absorbing

这里有一些有趣的东西，但与问题无关，是AbsorbPointer Widget，它可以用来反映孩子身上发生的所有触摸事件。

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"),
            ),
          ),
        ),
      ],
    ),
  );
}