Flutter 指针事件原理&;点击穿透_flutter pointer,2024年最新flutter页面跳转动画
在Flutter中,点击穿透通常是指点击事件没有被某个覆盖层(如一个弹窗或者遮罩层)拦截,而是穿过这个层继续传递到下面的widget。
解决点击穿透的问题,可以使用AbsorbPointer
或IgnorePointer
小部件。AbsorbPointer
小部件会 absorbs pointers 事件(阻止它们 propagate to the widgets below in the tree),但是不会影响子widget的渲染,而IgnorePointer
小部件则不会渲染子widget,同时也不会处理事件。
以下是一个简单的例子,展示如何使用AbsorbPointer
来阻止点击事件穿透:
Stack(
children: <Widget>[
// 底层的可点击widget
GestureDetector(
onTap: () {
print('底层widget被点击');
},
child: Container(
color: Colors.red,
child: Center(child: Text('底层widget')),
),
),
// 遮罩层,阻止点击事件穿透
AbsorbPointer(
child: GestureDetector(
onTap: () {
print('遮罩层被点击');
},
child: Container(
color: Colors.blue.withOpacity(0.5),
child: Center(child: Text('遮罩层')),
),
),
),
],
),
在这个例子中,当你点击遮罩层时,AbsorbPointer
会拦截事件,不会打印"底层widget被点击"。如果你点击底层的widget,会正常打印点击信息。
如果你想要在点击遮罩层时进行页面跳转,可以在AbsorbPointer
的onTap
回调中进行导航操作:
Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage()));
这样,当点击遮罩层时,会触发页面跳转。
评论已关闭