Flutter ListView.builder中InkWell水波纹正常但onTap点击事件失效

核心原因 #

• 手势竞争冲突：ListTile本身属于自带交互属性的组件，即使没有绑定onTap回调，也会优先消费上层传递的手势事件，导致包裹它的InkWell的onTap回调被拦截，仅水波纹效果能正常触发
• 冗余嵌套：不需要同时使用InkWell和ListTile两个可交互组件实现同一个点击需求，额外嵌套反而会提高手势冲突概率
• 多余外层容器：原代码外层套了无用的Container包裹Scaffold，虽然不是本次问题的直接诱因，但可能引发其他布局异常，建议直接删除

修复方案 #

方案1：使用ListTile自带onTap（推荐） #

ListTile默认自带Material风格水波纹效果，直接绑定onTap即可实现需求，代码最简洁：

class Quizes extends StatelessWidget {
  const Quizes({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Quizes'),
      ),
      body: Center(
        child: ListView.builder(
          itemBuilder: (context, position) {
            return Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                    onTap: () {
                      print(position);
                    },
                    title: Text('Test ${position.toString()}'),
                  )
                ],
              ),
            );
          },
          itemCount: 1,
        ),
      ),
    );
  } 
}

方案2：保留InkWell的写法 #

如果需要自定义水波纹样式、或者要让整个Card区域都响应点击，把InkWell移到Card的直接子节点位置，避免和ListTile产生手势冲突：

class Quizes extends StatelessWidget {
  const Quizes({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Quizes'),
      ),
      body: Center(
        child: ListView.builder(
          itemBuilder: (context, position) {
            return Card(
              child: InkWell(
                onTap: () {
                  print(position);
                },
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ListTile(
                      title: Text('Test ${position.toString()}'),
                    )
                  ],
                ),
              ),
            );
          },
          itemCount: 1,
        ),
      ),
    );
  } 
}

两种方案都可以正常触发onTap的打印逻辑，同时保留水波纹交互效果。

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