如何将颤动中的 ontap 事件委托给堆栈中的底部小部件？

Question

如果两个容器在堆栈中完全重叠，那么当点击顶部的小部件时，我们如何检测底部的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，但也存在绿色容器的某些部分。我想知道这两个事件是否都可以调用？

谢谢。

Answer 1

AFAIK，没有直接的方法可以知道用户是否点击了底层小部件。但是，我运行了您的红色和绿色容器代码，并通过 onTapDown 事件实现了它

最简单的解决方案（没有 onTapDown）::

增加了以下功能：

void onGreenClick()
  {
    print("Green clicked");
  }

将 Green 的 onTap 处理程序更改为：

onTap: onGreenClick,

并在 Red 的 onTap 中添加 onGreenClick() 为：

onTap: () {
            print('red clicked.');
            onGreenClick();
          },

但是，正如您猜测的那样，这仅在小部件彼此完全重叠时才有效。如果有一些区域存在红色容器但不是绿色的，那么上面的容器就会失败。要实现这一点，您可以使用onTapDown，如下所示：

将 onTapDown 处理程序添加到红色和绿色（在 GestureDetector 下）为：

onTapDown: (TapDownDetails details) => onTapDown(context, details),

处理函数在哪里：

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();
  }

现在，如果您看到最后一行，我们只在特定的 x,y 坐标上调用 onGreenClick。

因此，即使点击红色，您也会在调试输出窗口中获得“绿色点击”。

完整代码可here