SwiftUI调用ignoresSafeArea后视图出现多余空白如何解决？

你给Image组件单独添加了ignoresSafeArea()修饰符，同时Image被设置了固定高度、且添加了clipped()裁剪修饰符，触发了SwiftUI的布局异常：

• 未添加ignoresSafeArea()时，Image的布局顶部默认从屏幕顶部安全区下沿（状态栏底部）开始，固定高度的Image底部刚好衔接下方的HStack，布局正常。
• 加上ignoresSafeArea()后，SwiftUI允许Image的绘制范围延伸到顶部安全区外，但Image自身的固定高度没有变化，你设置的aspectRatio(contentMode: .fill)会让图片先按比例填充满整个可绘制区域（包含顶部安全区），之后被clipped()裁掉超出自身frame的部分，最终Image在VStack布局流中占据的高度虽然没变，但实际可见的内容整体上移，下方就多出了和顶部安全区（状态栏）高度相等的空白区域。

两种方案任选其一即可：

1. 将ignoresSafeArea()修饰符移到外层VStack上，同时移除Image上的ignoresSafeArea()：

var body: some View {
    VStack {
        Image("Banner")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(height: self.show ? 120 : 70, alignment: .bottomLeading)
            .blur(radius: self.show ? 0 : 2)
            .clipped()
        
        HStack {
            VStack(alignment: .leading) {
                Text(user.name)
                    .font(.title)
                
                HStack {
                    Text(user.screenName)
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    Spacer()
                }
            }
            Spacer()
            UserImage(user: user, show: self.$show)
        }
        .padding()
                    
        if self.show {
            Divider()

            HStack {
                    Text(user.userDetailsDescription)
                        .font(.subheadline.weight(.light))
                    Spacer()
            }.padding(.leading)
        }
    }        
    .ignoresSafeArea(edges: .top)
}

该方案让整个父容器忽略顶部安全区，VStack的布局从屏幕最顶部开始，Image自然会延伸到状态栏位置，不会出现错位空白。edges: .top参数可以避免底部内容被屏幕圆角、底部手势条遮挡。

2. 给Image补充宽度约束，同时指定仅忽略顶部安全区：
   保留Image上的ignoresSafeArea()，给Image的frame添加maxWidth: .infinity约束，同时明确只忽略顶部边缘的安全区：

Image("Banner")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(maxWidth: .infinity, height: self.show ? 120 : 70, alignment: .bottomLeading)
    .blur(radius: self.show ? 0 : 2)
    .clipped()
    .ignoresSafeArea(edges: .top)

该方案让Image自身的宽度占满全屏，忽略顶部安全区时不会出现内容偏移，裁剪后的可见区域刚好覆盖从屏幕顶部到固定高度的位置，不会留下空白。

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