SwiftUI设置Image宽度为.infinity时视图超出屏幕问题

问题表现 #

需要实现图片撑满屏幕全宽的效果，但将图片宽度设置为.infinity时，视图框架会被推出屏幕边界，异常效果如下：

最小复现代码 #

import SwiftUI

struct ItemView: View {
    var body: some View {
        ZStack {
            
            //灰色背景
            Color(red: 0.9, green: 0.9, blue: 0.9).edgesIgnoringSafeArea(.all)
            
            
            VStack {
                
                Image("PS5")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: .infinity, height: 250)

 
                Spacer()
            }
        }
        .ignoresSafeArea()
        .navigationBarTitleDisplayMode(.inline)
        
    }
}

struct ItemView_Previews: PreviewProvider {
    static var previews: some View {
        ItemView()
    }
}

问题原因 #

• 直接给frame(width:)传入.infinity，会强制视图宽度为无穷大，不受父容器的宽度约束限制，最终把整个布局撑出屏幕边界
• 使用aspectRatio(contentMode: .fill)模式时，图片会按比例缩放填满设定的frame，超出frame的部分默认不会被裁剪，也会造成布局溢出

修复方案 #

将width: .infinity替换为maxWidth: .infinity，同时添加clipped()修饰符裁剪图片超出frame的部分即可，修正后的核心代码如下：

Image("PS5")
    .resizable()
    .aspectRatio(contentMode: .fill)
    // 用maxWidth约束宽度上限为父容器可用宽度，不会撑破布局
    .frame(maxWidth: .infinity, maxHeight: 250)
    // 裁剪缩放后超出frame的图片内容
    .clipped()

关键参数说明 #

• frame(maxWidth: .infinity)：告知视图宽度最大可占据父容器提供的全部可用宽度，不会突破父容器的边界限制
• clipped()：将视图超出自身frame范围的内容裁剪隐藏，避免溢出影响其他布局

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