SwiftUI中设置Frame后图片仍超出ZStack/VStack边界求助

你当前代码的问题在于clipped()的应用位置和修饰符顺序不对，导致图片超出了ZStack的红色边界。aspectRatio(contentMode: .fill)会让图片保持原有比例并填充可用空间，若不正确约束裁剪范围，就会溢出容器。

方法一：将裁剪应用到ZStack容器 #

把clipped()添加到ZStack的修饰链末尾，直接裁剪整个容器范围内的内容：

struct CategoryItem: View {
    var body: some View {
        ZStack {
            Image("s3")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .padding(.all, 8)
        }
        .frame(width: 100, height: 100)
        .background(.red)
        .clipped() // 裁剪ZStack边界外的内容
    }
}

方法二：调整修饰符顺序约束图片范围 #

让图片先填充ZStack的可用空间，再通过padding留出红色边框，最后裁剪图片自身的溢出部分：

struct CategoryItem: View {
    var body: some View {
        ZStack {
            Color.red // 直接用Color作为底层背景
            Image("s3")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(maxWidth: .infinity, maxHeight: .infinity) // 填充ZStack内部空间
                .padding(8) // 留出红色边框区域
                .clipped() // 裁剪图片超出padding内区域的部分
        }
        .frame(width: 100, height: 100)
    }
}

两种方法都能让图片在Fill模式下保持比例，同时被约束在ZStack的红色边框内，不会超出边界。

内容的提问来源于stack exchange，提问作者Jaseel.Dev