携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

在开发应用程序时，我们可能希望克服禁用某些点击事件的情况。在这种情况下，我们确实想要实现这些。就需要用到今天讲解的AbsorbPointer 与 IgnorePointer俩个组件，所以让我们开始去了解它们吧。

我们有这样一个例子：

Stack(
alignment: Alignment.*center*,
children: [
const SizedBox(
height: 200,
width: 400,
child: Card(
color: Colors.blue,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),),
GestureDetector(
child: const SizedBox(
height: 150,
width: 300,
child: Card(
color: Colors.green,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),),
onTap: () {
debugPrint("print green");
},),],),

我有两个 SizedBox 组件，它们具有不同的大小和颜色，并且它们包裹在 Stack 组件下。

现在，让我们看看 AbsorbPointer 和 IgnorePointer 在这个例子分别使用。

AbsorbPointer

防止组件接收指针事件并终止自身的命中测试。

在上面的例子中，如果点击绿色盒子的时候，我们会打印"print green"。那我们怎么禁止收到绿色盒子的事件呢？这里我们就要用AbsorbPointer这个组件了。

AbsorbPointer(
absorbing: true,
child: GestureDetector(
child: const SizedBox(
height: 150,
width: 300,
child: Card(
color: Colors.green
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),),
onTap: () {
debugPrint("print green");
},),)

这里需要注意的是：不要忘记将absorbing属性设置为true。

具体的可以参考： AbsorbPointer 类 - 小部件库 - Dart API

在命中测试期间AbsorbPointer的小部件。当absorbing为true时，此小部件会阻止其子树。

IgnorePointer

使指定的小组件不可见。

Stack(
alignment: Alignment.*center*,
children: [
GestureDetector(
child: const SizedBox(
height: 200,
width: 400,
child: Card(
color: Colors.blue,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
),
onTap: () {
debugPrint("print blue");
},
),
IgnorePointer(
ignoring: true,
child: GestureDetector(
child: const SizedBox(
height: 150,
width: 300,
child: Card(
color: Colors.green,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),),
onTap: () {
debugPrint("print green");
},),),],),

这次我们会发现控制台不会打印"print green",而打印了"print blue"，因为IgnorePointer组件将绿色盒子组件设置为不可见。

注意：不要忘记将 ignoring 属性设置为 true。

具体的可以参考： IgnorePointer 类 - 小部件库 - Dart API

到这里我们就简单的介绍完这一期Flutter 的组件 AbsorbPointer 与 IgnorePointer。

Flutter 的 AbsorbPointer 与 IgnorePointer

AbsorbPointer

IgnorePointer