如何实现父Widget点击时触发所有子Widget的Splash/Ripple效果？

完全可行，你的代码问题在于GestureDetector会拦截点击事件，导致内部InkWell无法响应；且即便去掉GestureDetector，点击单个InkWell也只会触发自身的涟漪。以下是具体实现方案：

核心思路 #

通过GlobalKey绑定每个需要触发涟漪的组件，在父容器的点击回调中主动调用每个组件的涟漪触发方法，实现点击父区域时所有子容器同时出现涟漪效果。

完整代码示例 #

class MultiSplashRow extends StatefulWidget {
  const MultiSplashRow({super.key});

  @override
  State<MultiSplashRow> createState() => _MultiSplashRowState();
}

class _MultiSplashRowState extends State<MultiSplashRow> {
  // 为每个需要触发涟漪的组件分配GlobalKey
  final List<GlobalKey<InkResponseState>> _inkKeys = [
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
  ];

  void _onRowTap() {
    // 遍历所有Key，触发每个组件的涟漪效果
    for (final key in _inkKeys) {
      key.currentState?.showMaterialRipple(
        const Offset(0.5, 0.5), // 涟漪中心（相对于组件自身的坐标，0.5为中心）
        radius: 30, // 涟漪半径，可根据容器大小调整
      );
    }
    // 执行你的点击逻辑
    doSomething();
  }

  void doSomething() {
    // 这里写原有的点击处理逻辑
  }

  @override
  Widget build(BuildContext context) {
    // 用InkWell作为父容器，替代GestureDetector，保证墨水系统正常工作
    return InkWell(
      onTap: _onRowTap,
      child: Row(
        children: [
          Expanded(
            child: InkResponse(
              key: _inkKeys[0],
              containedInkWell: true, // 限制涟漪在容器范围内
              child: Container(
                height: 60,
                color: Colors.grey[200],
              ),
            ),
          ),
          Expanded(
            child: InkResponse(
              key: _inkKeys[1],
              containedInkWell: true,
              child: Container(
                height: 60,
                color: Colors.grey[300],
              ),
            ),
          ),
          Expanded(
            child: InkResponse(
              key: _inkKeys[2],
              containedInkWell: true,
              child: Container(
                height: 60,
                color: Colors.grey[400],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• 父容器使用InkWell而非GestureDetector：InkWell属于Material的墨水渲染系统，能确保涟漪效果正确显示在组件上方。
• InkResponse替代InkWell：InkResponse更轻量，仅提供涟漪效果，适合不需要额外点击回调的场景；若需要子组件单独响应点击，也可替换为InkWell。
• GlobalKey的作用：通过GlobalKey可以直接获取到组件的状态对象，从而主动调用showMaterialRipple方法触发涟漪。
• containedInkWell: true：确保涟漪不会超出当前Container的边界，视觉效果更规整。

内容的提问来源于stack exchange，提问作者Cristian Baron