在Flutter中,可以使用Stack来实现层叠布局,使用Positioned对组件进行定位。
Stack(
children: [
// 下方的层级
Container(
color: Colors.red, // 添加颜色
// 添加触摸事件处理方法
child: GestureDetector(
onTap: () {
// 下方层级被触摸的处理逻辑
},
),
),
// 上方的层级
Positioned(
child: GestureDetector(
onTap: () {
// 上方层级的点击事件处理逻辑
},
child: Container(
margin: EdgeInsets.only(left: 100, top: 100),
width: 100,
height: 100,
color: Colors.green, // 添加颜色
),
),
),
],
)
但是默认情况下,上层的组件会遮挡下层的组件导致手势触摸事件失效。
解决办法:
使用IgnorePointer组件:可以将上方的层级包裹在IgnorePointer组件中,这样上方的组件将不会接收手势触摸事件,而下方的组件依然可以接收触摸事件。
Stack(
children: [
// 下方的层级
Container(
color: Colors.red, // 添加颜色
// 添加触摸事件处理方法
child: GestureDetector(
onTap: () {
// 下方层级被触摸的处理逻辑
},
),
),
// 上方的层级
Positioned(
child: IgnorePointer(
child: GestureDetector(
onTap: () {
// 上方层级的点击事件处理逻辑
},
child: Container(
margin: EdgeInsets.only(left: 100, top: 100),
width: 100,
height: 100,
color: Colors.green, // 添加颜色
),
),
),
),
],
)
但在Flutter中,IgnorePointer
小部件将会完全忽略用户输入事件,包括手势和点击事件。因此,如果你在上层层级中使用IgnorePointer
,它将不会触发该层级的点击事件。
想要实现上面层级添加颜色,同时下层层级的触摸手势事件正常工作,并且保持上层层级的点击事件,
我在网上找了一些资料,说是可以通过使用 下层手势使用HitTestBehavior.translucent
可以确保即使上层层级存在,下层层级可以接收到手势事件。上层层级使用Positioned.fill
进行定位,并使用GestureDetector
来处理点击事件。
但很遗憾,并没有解决了我的需求。
我是额外写了一个通过使用IgnorePointer
小部件包裹带有背景颜色的组件放在上层组件和下层组件的中间,这样在视觉体验来看可以解决上面层级添加颜色,同时下层层级的触摸手势事件正常工作,并且保持上层层级的点击事件。
Stack(
children: [
// 下方的层级
Container(
color: Colors.red, // 添加颜色
// 添加触摸事件处理方法
child: GestureDetector(
onTap: () {
// 下方层级被触摸的处理逻辑
},
),
),
// 添加的颜色遮挡
Positioned(
bottom: 0,
child: IgnorePointer(
child: Container(
height: 172,
width: 200,
color: Colors.black.withOpacity(0.5),
),
)),
// 上方的层级
Positioned(
child: GestureDetector(
onTap: () {
// 上方层级的点击事件处理逻辑
},
child: Container(
margin: EdgeInsets.only(left: 100, top: 100),
width: 100,
height: 100,
color: Colors.green, // 添加颜色
),
),
),
],
)
结语
这种解决方法可能并不是最优解,有其他解决方法的小伙伴可以在评论区提出来哦