SwiftUI使用contextMenu时圆形图片阴影变方形如何修复

根因说明 #

SwiftUI 唤起 contextMenu 时，默认会使用视图的原始矩形帧作为过渡效果的形状计算依据，不会自动识别 clipShape 施加的自定义裁剪效果，因此阴影会被按照矩形范围渲染，出现变形问题。

修复方案 #

方案1：添加contentShape修饰符（推荐，兼容性最好） #

在 clipShape(Circle()) 之后添加 .contentShape(Circle()) 修饰符，明确声明视图的交互区域、形状识别都遵循圆形边界，系统处理 contextMenu 过渡效果时就会沿用圆形计算阴影范围。
修复后代码：

Image(systemName: "plus")
    .padding(20)
    .background(Color.yellow)
    .clipShape(Circle())
    .contentShape(Circle()) // 新增该行即可修复
    .shadow(radius: 10)
    .contextMenu{
        Button {} label: {
            Label("test", systemImage: "")
        }
    }

方案2：阴影挂载到背景层（适配低系统版本） #

如果在 iOS 15 及更低版本上方案1不生效，可以把阴影直接挂载到background的圆形元素上，避免和外层裁剪逻辑冲突：

Image(systemName: "plus")
    .padding(20)
    .background(
        Color.yellow
            .clipShape(Circle())
            .shadow(radius: 10)
    )
    .contentShape(Circle())
    .contextMenu{
        Button {} label: {
            Label("test", systemImage: "")
        }
    }

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