如果两个容器在堆栈中完全重叠,那么当单击顶部的小部件时,如何检测底部的onTap()
事件?
用例:]
我的顶部容器是透明的。我正在使用此透明容器轻拍来为顶部小部件设置动画(此顶部小部件粘贴在场景的底部)。在点击时,我想在位置上为同一底部元素设置动画。
另外,我实现了自定义Rawgesture,但我看不到手势竞技场冲突。仅在将元素定位为一个是父级而第二个是子级的情况下,才检测到此竞技场冲突。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(children: <Widget>[
GestureDetector(
onTap: () {
print('green clicked.');
},
child: Container(
color: Colors.green,
width: 400,
height: 400,
),
),
GestureDetector(
onTap: () {
print('red clicked.');
},
child: Container(
color: Colors.red,
width: 200,
height: 200,
),
),
]),
);
}
}
在上面的示例中,当我单击红色容器时,它将打印red clicked
,但绿色容器中也有一部分。我想知道两个事件是否都可以调用?
谢谢。
AFAIK,没有直接方法可以知道用户是否在其中轻拍了基础小部件。但是,我运行了您的红色和绿色容器的代码,并通过[C0事件
实现了它最简单的解决方案(不带onTapDown)::
添加了以下功能:
onTapDown
将Green的onTap处理程序更改为:
void onGreenClick()
{
print("Green clicked");
}
并且在Red的onTap中将onGreenClick()添加为:
onTap: onGreenClick,
但是,您猜想这仅在小部件彼此完全重叠时才有效。万一有红色容器存在但没有绿色的区域,则上面的区域将失效。为此,您可以使用onTap: () {
print('red clicked.');
onGreenClick();
},
如下:
将onTapDown处理程序添加为红色和绿色(在GestureDetector下)为:
onTapDown
处理程序函数为:
onTapDown: (TapDownDetails details) => onTapDown(context, details),
现在,如果您看到最后一行,我们仅在特定的x,y坐标上调用onGreenClick。
因此最终结果是,即使单击红色,您仍会在调试输出窗口中获得“绿色单击”。
整个代码可用void onTapDown(BuildContext context, TapDownDetails details) {
print('${details.globalPosition}');
final RenderBox box = context.findRenderObject();
final Offset localOffset = box.globalToLocal(details.globalPosition);
setState(() {
posx = localOffset.dx;
posy = localOffset.dy;
});
if (posx < 100.0 && posy < 100.0) onGreenClick();
}