Flutter iOS端CustomPaint阴影宽度异常问题求助

问题背景 #

使用CustomPaint结合自定义Clipper实现带阴影的裁剪组件时，Android端阴影显示正常，但iOS端设置blurRadius后，阴影无法铺满组件完整宽度。更新Flutter并通过Xcode重新编译后出现该问题，已尝试清理Flutter缓存、更换Xcode 14.2/14.3.1版本编译，问题仍未解决。

问题分析 #

1. iOS与Android的Skia渲染引擎对模糊阴影的边界处理存在差异：当裁剪路径紧贴组件边界时，iOS端会裁切超出路径范围的模糊阴影部分，而Android端会保留完整的模糊效果。
2. 自定义Clipper的路径未给阴影模糊效果预留足够空间，导致模糊部分被组件边界裁切。
3. dart:ui的Shadow类在iOS端的渲染逻辑可能因Flutter版本更新发生了细微变化，加剧了边界裁切问题。

解决方案 #

方案1：调整Clipper路径，预留阴影模糊空间 #

修改TopPanelClip，在原始路径基础上向外扩展与blurRadius匹配的尺寸，确保阴影模糊部分不会被组件边界裁切：

class TopPanelClip extends CustomClipper<Path> {
  final height = 50.0;
  final double shadowBlurRadius;

  TopPanelClip({required this.shadowBlurRadius});

  @override
  Path getClip(Size size) {
    // 扩展原始尺寸，给阴影模糊效果预留空间
    final expandedSize = Size(
      size.width + shadowBlurRadius * 2,
      size.height + shadowBlurRadius * 2,
    );
    // 偏移量，确保原始路径居中
    final offset = Offset(shadowBlurRadius, shadowBlurRadius);

    final Path path = Path();
    path.moveTo(offset.dx, offset.dy + height);
    path.quadraticBezierTo(
      expandedSize.width / 2,
      offset.dy,
      expandedSize.width - offset.dx,
      offset.dy + expandedSize.height / 2,
    );
    path.lineTo(expandedSize.width - offset.dx, expandedSize.height - offset.dy);
    path.lineTo(offset.dx, expandedSize.height - offset.dy);
    path.extendWithPath(path, const Offset(0, -2));
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => true;
}

使用时传入blurRadius值：

SizedBox(
  width: MediaQuery.of(context).size.width,
  height: 100,
  child: ClipShadowPath(
    shadow: const Shadow(blurRadius: 5, offset: Offset(0, -2)),
    clipper: TopPanelClip(shadowBlurRadius: 5),
    child: Container(color: ThemeCustom.backgroundColor),
  ),
)

方案2：修改阴影绘制逻辑，膨胀路径边界 #

在_ClipShadowShadowPainter中对裁剪路径进行膨胀处理，确保模糊阴影的完整显示：

class _ClipShadowShadowPainter extends CustomPainter {
  final Shadow shadow;
  final CustomClipper<Path> clipper;

  _ClipShadowShadowPainter({required this.shadow, required this.clipper});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = shadow.toPaint();
    var clipPath = clipper.getClip(size).shift(shadow.offset);

    // 膨胀路径，为模糊阴影预留空间
    final expandedPath = clipPath.shift(Offset(-shadow.blurRadius / 2, -shadow.blurRadius / 2));
    final bounds = expandedPath.getBounds();
    final rect = Rect.fromLTWH(
      bounds.left - shadow.blurRadius / 2,
      bounds.top - shadow.blurRadius / 2,
      bounds.width + shadow.blurRadius,
      bounds.height + shadow.blurRadius,
    );
    final finalPath = Path()..addPath(expandedPath, Offset.zero)..addRect(rect);

    canvas.drawPath(finalPath, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

方案3：使用内置组件替代自定义绘制 #

如果自定义绘制的跨平台差异难以解决，可使用Flutter内置的PhysicalModel结合ClipPath实现，跨平台一致性更好：

SizedBox(
  width: MediaQuery.of(context).size.width,
  height: 100,
  child: ClipPath(
    clipper: TopPanelClip(),
    child: PhysicalModel(
      color: ThemeCustom.backgroundColor,
      elevation: 5, // 对应blurRadius的模糊强度
      shadowColor: Colors.black.withOpacity(0.5), // 阴影颜色与透明度
      child: Container(color: ThemeCustom.backgroundColor),
    ),
  ),
)

注意事项 #

• 方案1需根据实际blurRadius值调整扩展尺寸，避免过度扩展导致布局偏移。
• 方案2的路径膨胀需确保路径闭合，避免出现异常绘制效果。
• 方案3的PhysicalModel阴影效果自定义程度有限，但无需处理复杂的跨平台渲染差异。

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