Flutter如何实现滚动时带圆角的组件遮罩裁剪效果

效果预期 #

目标为中间滚动区域设为透明时，组件向上滚动到顶部边界消失的过程中，沿顶部圆角弧度自然截断透出下层内容，保持设计语言统一，避免硬边界直切的违和感。此前尝试WidgetMask、ClipPath组件未达预期，核心原因是这类组件默认做固定形状的硬裁剪，没有和滚动状态、透明透传逻辑结合。

可行实现方案 #

• 方案1：ShaderMask动态渐变蒙层
  核心逻辑是抛弃固定形状裁剪，用带透明度渐变的着色器蒙层绑定滚动位置：
  1. 给滚动容器外层嵌套ShaderMask，蒙层覆盖范围仅限定在顶部圆角高度的区间内
  2. 蒙层着色器使用线性alpha渐变：从顶部圆角最高点的完全透明，过渡到圆角最低点的完全不透明，渐变路径严格匹配顶部圆角的弧度
  3. 绑定滚动控制器的偏移监听，当内容向上滚动进入圆角区间时，对应位置的内容透明度随滚动距离线性衰减，实现沿圆弧自然消失的效果，无硬边问题
• 方案2：动态CustomClipper自定义裁剪
  适合需要严格匹配圆角路径的场景，此前ClipPath方案无效是因为裁剪路径为写死的固定圆角矩形，不会随滚动状态变化，调整方式如下：
  1. 自定义继承CustomClipper<Path>的裁剪类，将滚动偏移量作为入参
  2. 动态计算裁剪路径：当滚动偏移小于圆角高度时，顶部裁剪边用贝塞尔曲线绘制对应弧度的圆角；当滚动偏移超过圆角高度后，顶部裁剪边退化为直线
  3. 给裁剪路径边缘加1-2px的抗锯齿模糊处理，避免边缘出现锯齿感
• 方案3：分层混合渲染
  适合透明区域需要透出复杂下层内容（如视频、动态动画）的场景：
  1. 布局拆为上下两层：下层为需要透出的任意内容，上层为滚动内容层
  2. 在两层中间加一个仅带alpha通道的圆角遮罩，遮罩形状和顶部圆角完全匹配，圆角外区域alpha值为0，圆角内区域alpha值为1
  3. 滚动内容层设置BlendMode.dstIn混合模式，内容只会在遮罩alpha值为1的区域显示，滚动到顶部时自然沿圆角边缘消失，完全不会出现硬切问题

避坑提示：不要直接给滚动容器加固定圆角Clip再设透明背景，这种方案本质还是矩形边界裁剪，只是容器边框绘制了圆角，内容超出容器时依然会按矩形硬边界截断，无法达到预期效果。

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