颤动: 忽略小部件上的触摸事件

我想有一个模糊的图像上我的其他小部件，但是，我不能与它下面的小部件，当我这样做。

46188 次浏览
小开
最佳答案

解决方案

你可以解决你的交互问题(不能与你的模糊图像下面的 Widget交互) ，用一个 IgnorePointer包围你的 BackdropFilter。

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

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

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

IgnorePointer(ignoring: false, ...)

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

吸收

这里有一些有趣的东西值得一看，但与问题无关的是 AbsorbPointer Widget，它可以用于 反思中所有发生在它的子 自我毁灭上的 触摸事件。

小开

您可以使用 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"),
),
),
),
],
),
);
}
小开

更新

其他的答案都很吸引人。

让我们看一个使用 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'),
),
               

...

结果:

希望对谁有帮助! 祝你今天愉快。


提交答案