公司APP项目的登录页有一个人机验证功能,需要实现在登录按钮下边放置一个webview来加载验证页面,在点击登录按钮时需要将点击事件穿透到下边的webview,由webview处理人机验证。
在flutter中也可以实现这样的事件穿透,需要使用IgnorePointer或者AbsorbPointer,这两个widget的作用是都是忽略命中测试,区别是IgnorePointer不可以在子组件当中接收命中测试事件,AbsorbPointer可以接收命中测试。
flutter具体实现:
使用IgnorePointer
return Listener(
child: Stack(
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints.tight(Size(ScreenUtil().screenWidth - 32, 52.0)),
child: WebView(
onWebViewCreated: (c){
_controller = c;
},
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
),
),
// IgnorePointer
IgnorePointer(
child: Container(
padding: EdgeInsets.zero,
height: 52,
width: ScreenUtil().screenWidth - 32,
child: CupertinoButton(
child: Text(
'登录',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
onPressed: () {
//不会打印
print('点击了登录按钮');
},
color: Colors.blue,
),
),
),
],
),
onPointerDown: (event){
print("点击了整体区域");
},
);
使用AbsorbPointer
return Listener(
child: Stack(
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints.tight(Size(ScreenUtil().screenWidth - 32, 52.0)),
child: WebView(
onWebViewCreated: (c){
_controller = c;
},
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
),
),
// AbsorbPointer
AbsorbPointer(
absorbing: false,//需要设置这个属性才可以使子组件接收命中测试
child: Container(
padding: EdgeInsets.zero,
height: 52,
width: ScreenUtil().screenWidth - 32,
child: CupertinoButton(
child: Text(
'登录',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
onPressed: () {
//会打印
print('点击了登录按钮');
},
color: Colors.blue,
),
),
),
],
),
onPointerDown: (event){
print("点击了整体区域");
},
);