Flutter：忽略小部件上的触摸事件答案

【问题标题】：Flutter: Ignore touch events on a WidgetFlutter：忽略小部件上的触摸事件
【发布时间】：2018-11-09 01:50:18
【问题描述】：

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

【问题讨论】：

How do I do the "frosted glass" effect in Flutter?的可能重复
不是真的@creativecreatorormaybenot ，我希望看到的上一页模糊而不是随机图像和一个盒子清楚地看到的内容，就好像悬停在它上面带有阴影一样。
是的，我明白了。但是因为 Flutter 专门与 Widget 合作，所以该问题的答案也适用于您的问题。您的整个页面可以简单地用 BackdropFilter 包装。
我试过了。黑色仍然显示。我不知道黑色是从哪里来的。好吧，我有点做，只发生在导航到功能之后。除非有其他方法可以淡入小部件，传递数据，然后在任何数据发生变化时返回它？

标签： dart flutter

【解决方案1】：

解决方案

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

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

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

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

IgnorePointer(ignoring: false, ...)

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

吸收

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

【讨论】：

什么时候可见？当我看到它时，我可以与它互动吗？我唯一不想被访问的时候是它被隐藏的时候。
然后只需检查小部件是否可见，如果是，则通过 IgnorePointer 激活 IngorePointer(ignoring: true, ...)
有谁知道为什么这些在 Flutter 中不能与 WebView 一起使用？

【解决方案2】：

您可以使用IgnorePointer 或AbsorbPointer。

IgnorePointer

IgnorePointer(
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Not clickable Button'),
  ),
);

AbsorbPointer

AbsorbPointer(
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Not clickable Button'),
  ),
);

有什么区别？

如果您的主窗口小部件下方有一个同样能够接收点击事件的窗口小部件，并且您在父窗口小部件上使用IgnorePointer，则子窗口小部件仍将接收点击事件。

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

显示差异的示例。

@override
Widget build(BuildContext context) {
  return SizedBox(
    width: double.infinity,
    child: Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          width: 250,
          child: ElevatedButton(
            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: ElevatedButton(
              onPressed: () => print("Button 2"),
              child: Text("Button 2"),
            ),
          ),
        ),
      ],
    ),
  );
}

【讨论】：

这不是也阻止了按钮 2 上的点击吗？在新创建的应用程序中运行上述内容时，我看不到打印按钮 2 输出。

【解决方案3】：

更新

其他答案很吸引人。

让我们看一个使用IgnorePointer 小部件的实际示例。

当我们开始尝试实现诸如切换小部件上的选择以删除之类的操作时，这种情况很常见。

例子： 按住 WhatsApp 消息并删除顶部的选项。如果在此选项处于活动状态时点击其他任何地方，它就会消失。

我是这样实现的。

appBar: AppBar(
         title: Text('MyApp'), 
         actions: [
            if (_selected != null) // <-- Delete button only appear something selected.
               IconButton(
               icon: Icon(Icons.delete),
               onPressed: () { 
                   // Delete Code here
               }
         ]
      ),
body: GestureDetector(
           behavior: HitTestBehavior.opaque,
           onTap: () { 
                 print('Tapped');
                 setState(() { _selected = null });
           },
           child: IgnorePointer(
           ignoring: _selected != null ? true : false, // <-- Ignore only when selecting something.
           child: Column(
             children: [
              ...

              // This is a sample message 

              GestureDetector(
              onLongPress: () {  
                 setState(() { _selected = messageId  });
              }
              child: Container(
                 child: Text('This is a message'),
              ),
               
              ...

结果：

希望它对某人有所帮助！祝你有美好的一天。

【讨论】：