SwiftUI如何在Circle视图内嵌入方形Image且不超出边界

实现方案 #

你不需要手动计算圆形边界的数学逻辑，用SwiftUI原生的布局规则就能轻松实现，有两种常用的简便写法：

写法1：ZStack实现 #

给图片添加scaledToFit适配比例，搭配padding控制边距即可：

// 可自定义整体视图尺寸
ZStack()
    .frame(width: 120, height: 120) {
    Circle()
        .fill(.orange)
        
    Image(systemName: "trash")
        .resizable()
        .scaledToFit()
        .foregroundColor(.blue)
        // 数值越大，图片和圆形边框的边距越大
        .padding(18)
}

写法2：overlay实现（更简洁） #

直接把图片作为圆形的overlay，不需要额外嵌套ZStack：

Circle()
    .fill(.orange)
    .frame(width: 120, height: 120)
    .overlay {
        Image(systemName: "trash")
            .resizable()
            .scaledToFit()
            .foregroundColor(.blue)
            .padding(18)
    }

原代码问题说明 #

• 第一段代码只加了resizable没加scaledToFit和边距控制，图片会拉伸铺满整个容器，超出圆形的内切方形范围
• 第二段代码没加resizable，图片会保持系统默认的小尺寸，圆形没有固定尺寸约束的话会跟着图片缩小，就会出现图小或者圆形不显示的问题

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