Flutter 父子组件同时触发 onTap 事件

在 Flutter 开发中，有时会遇到子级组件设置了 onTap 事件后，父级组件无法触发 onTap 事件的情况。这是因为子级组件的 onTap 事件会阻止事件传递到父级组件。

为了解决这个问题，可以在子级组件的 onTap 事件中添加一个回调函数，将事件传递给父级组件的 onTap 事件。具体实现方法如下：

在子级组件中添加一个回调函数属性，例如 onChildTap：

class ChildWidget extends StatelessWidget {
  final VoidCallback onChildTap;
  
  ChildWidget({this.onChildTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 子级组件的点击事件
        print('Child Widget Tapped');
        if (onChildTap != null) {
          onChildTap();
        }
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
        child: Center(
          child: Text('Child Widget'),
        ),
      ),
    );
  }
}

在父级组件中，将子级组件的 onChildTap 回调函数传递给子级组件：

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 父级组件的点击事件
        print('Parent Widget Tapped');
      },
      child: ChildWidget(
        onChildTap: () {
          // 子级组件的点击事件回调函数
          print('Child Widget Tapped Callback');
        },
      ),
    );
  }
}

这样，当子级组件被点击时，先执行子级组件的 onTap 事件，然后再执行父级组件的 onTap 事件。同时，子级组件的 onChildTap 回调函数也会被触发。