Flutter中Padding导致onTap点击事件失效的原因与解决方案

首先明确：Padding组件本身不会阻断点击事件，你误判它是问题诱因，本质是碰到了Flutter Stack布局的命中测试规则坑：

• Stack的子组件按代码书写顺序从底到高层叠，越靠后声明的组件z轴高度越高，会覆盖在前面声明的组件上方。
• 你的Stack children顺序是：先写顶部按钮栏（包了Padding的那组Align组件），之后才声明背景波浪图、中间PageView等内容。其中背景波浪图设置了fit: BoxFit.cover，加上Stack开了clipBehavior: Clip.none不裁剪溢出内容，这张图的透明渲染区域直接盖在了顶部按钮栏的上方。
• Flutter命中测试默认规则是：只要组件在点击坐标位置有渲染内容（哪怕是完全透明的像素），就会优先接收点击事件，不会把事件透传给z轴更低的下层组件。你点顶部按钮的时候，点击事件全被上层的波浪图拦截了，根本到不了按钮、InkWell的onTap回调上。
• 你之前去掉Padding后点击暂时恢复，只是因为去掉边距后按钮位置上移，刚好脱离了波浪图的覆盖范围，并不是Padding本身有拦截点击的逻辑。
• 额外提一句你这里还有个小布局bug：顶部Padding设置了左右各20的边距，内部SizedBox却写死宽度为屏幕宽度ds.width，会导致左右各溢出20像素，触发布局溢出警告。

选任意一种方案都能解决问题，推荐两种搭配用更稳妥：

1. 给纯装饰性的背景波浪图加IgnorePointer包裹，直接禁用它的点击接收能力，毕竟它只是视觉装饰，不需要响应任何交互，就算溢出覆盖其他区域也不会抢点击事件：

   // 原来的背景波浪图代码外面包一层IgnorePointer
   IgnorePointer(
     child: AnimatedPositioned(
       duration: const Duration(milliseconds: 400),
       left: animatedPositionWaveImageLeft,
       child: Image.asset(
         'images/wh.png',
         fit: BoxFit.cover,
       ),
     ),
   ),
   

2. 调整Stack内子组件的书写顺序，把所有带交互的组件（顶部按钮栏、底部页码指示器、右下角浮动按钮）都挪到非交互组件（背景图、PageView、标题文本）的后面声明，让交互组件处于z轴最上层，不会被其他内容覆盖。
3. 顺手修复布局溢出问题：把顶部按钮栏里SizedBox的宽度从ds.width改成ds.width - 40（减去左右各20的padding值），适配Padding的内边距。

内容的提问来源于stack exchange，提问作者Jun K.