SwiftUI Menu中如何将图片裁剪为圆形？

问题原因 #

Menu组件的Label图标区域存在默认布局约束，直接对resizable()的Image应用clipShape(Circle())时，由于Image未明确尺寸，系统无法正确计算裁剪范围，导致圆形效果不生效。

解决方案 #

给Image添加明确的frame限制，配合scaledToFill()保证图片填满容器后再执行裁剪，即可得到预期的圆形效果。修改后的代码如下：

Menu("Ben") {
    Toggle(isOn: .constant(true)) {
        Label {
            Text("Ben")
        } icon: {
            Image("blueGradient")
                .resizable()
                .scaledToFill()
                .frame(width: 24, height: 24)
                .clipShape(Circle())
        }
    }
}

补充说明 #

• 若希望图片保持比例且不拉伸，可将scaledToFill()替换为scaledToFit()，如果需要纯色背景的圆形图标，可额外添加background修饰符填充空白区域。
• 也可以使用.mask(Circle())替代clipShape(Circle())，两者实现效果一致。

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