问题描述
Button嵌套Button时,外部调用stopPropagation没有阻止内部Button触发onTouch事件。
Button() {
Button()
.onTouch(xx)
}
.onTouch((event: TouchEvent) => {
// 没有阻止内部的button触发onTouch事件
event.stopPropagation();
})
问题描述
Button嵌套Button时,外部调用stopPropagation没有阻止内部Button触发onTouch事件。
Button() {
Button()
.onTouch(xx)
}
.onTouch((event: TouchEvent) => {
// 没有阻止内部的button触发onTouch事件
event.stopPropagation();
})
当你在一个 Button 上调用 stopPropagation()
时,你是在告诉 Flutter 的事件系统停止分发该事件到该 widget 的父级。然而,这并不意味着它会阻止同一 widget 上的其他事件监听器被触发。
在你的例子中,当你触摸外部的 Button 时,它的 onTouch
监听器会被触发,并且它会调用 event.stopPropagation()
。这会阻止事件继续分发到这个 widget 的父级,但是它不会影响这个 widget 上的其他 onTouch
监听器。因此,内部的 Button 仍然会响应这个事件。
如果你想在触摸外部 Button 时阻止内部 Button 的 onTouch
事件被触发,你需要在内部 Button 的 onTouch
监听器中也调用 event.stopPropagation()
。这样,当事件到达内部 Button 时,它的 onTouch
监听器会被触发,并且它会尝试阻止事件继续分发。如果外部 Button 的 onTouch
监听器已经调用了 event.stopPropagation()
,那么这个事件将不会继续分发到内部 Button。
这是一个例子:
Button(
onPressed: () {
print('Inner button pressed');
},
child: Button(
onPressed: (event) {
print('Outer button pressed');
event.stopPropagation();
},
child: Text('Click me'),
),
);
在这个例子中,当你点击内部的 Text 时,只有 'Inner button pressed' 会被打印出来。如果你点击外部的 Button,'Outer button pressed' 会被打印出来,并且事件会被阻止分发到内部 Button,所以 'Inner button pressed' 不会被打印出来。
解决措施
stopPropagation是阻止事件冒泡,事件冒泡是从里到外触发的,所以给外层按钮设置无效,如果想给外层按钮设置属性从而阻止里层按钮触发触摸事件,可以给外层按钮添加.hitTestBehavior(HitTestMode.Block)。
参考链接
触摸测试控制