Stack中半透明组件遮挡时如何实现与底层Widget的交互

你遇到的是Flutter Stack布局中上层可见组件默认参与命中测试、拦截下层触摸事件的问题，有以下两种常用修复方案：

方案1：给上层遮罩组件套IgnorePointer（最快适配现有代码） #

IgnorePointer会让自身及所有子组件完全不参与命中测试，所有触摸事件直接透传给下层组件，完全满足你的场景需求，代码示例如下：

Stack(
  children: [
    // 下层需要交互的目标Widget
    YourInteractableWidget(),
    // 上层渐变遮罩，套IgnorePointer透传事件
    IgnorePointer(
      child: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.transparent, Colors.white],
            stops: [0.7, 1.0], // 按需求调整渐变范围
          ),
        ),
      ),
    )
  ],
)

注：如果后续需要上层遮罩部分区域响应手势、其他区域透传，可以给上层组件套GestureDetector，将behavior属性设为HitTestBehavior.translucent，只给需要响应的区域绑定手势事件即可。

方案2：用ShaderMask直接给目标Widget加渐变效果（更优雅，无层叠冲突） #

不需要用Stack叠加遮罩层，直接通过ShaderMask给目标Widget绘制底部渐隐效果，从根源避免触摸事件冲突，性能更优，代码示例如下：

ShaderMask(
  // 渐变透明度遮罩的生成逻辑
  shaderCallback: (Rect bounds) => LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: const [Colors.white, Colors.transparent],
    stops: const [0.8, 1.0], // 控制底部渐隐的起始位置
  ).createShader(bounds),
  // 混合模式指定用渐变的alpha通道控制原Widget的显示透明度
  blendMode: BlendMode.dstIn,
  // 直接包裹需要加底部渐隐效果的Widget
  child: YourInteractableWidget(),
)

内容的提问来源于stack exchange，提问作者mosh.jinton