SwiftUI中启用.aspectRatio(.fill)导致关闭按钮消失的原因及解决办法

问题现象 #

在SwiftUI布局中，将图片置于顶部视图、关闭按钮放在右上角时，启用.aspectRatio(contentMode: .fill)后，右上角的X按钮会消失；关闭该属性后，按钮又重新显示。

原因分析 #

启用.aspectRatio(contentMode: .fill)后，图片会按比例填充指定的frame区域，但默认不会裁剪超出部分。加上ScrollView设置了.ignoresSafeArea()，图片的超出部分会延伸覆盖到安全区域外，直接叠在按钮上层，导致按钮被遮挡看不见。

解决方法 #

方法1：给图片添加裁剪修饰符 #

在图片的修饰链中加入.clipped()，裁剪掉超出frame的图片部分，避免其延伸覆盖按钮：

Image("home1")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .matchedGeometryEffect(id: "image", in: namespace)
    .frame(height: 350)
    .clipped() // 裁剪超出frame的内容

方法2：强制提升按钮的层级 #

给按钮添加.zIndex(1)，确保按钮在视图层级中处于最上层，不会被图片覆盖：

Button {
    withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
        show.toggle()
    }
} label: {
    Image(systemName: "xmark")
        .font(.body.weight(.bold))
        .foregroundColor(.secondary)
        .padding(8)
        .background(.ultraThinMaterial, in: Circle())
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
.padding(20)
.zIndex(1) // 强制提升按钮层级

方法3：移除ScrollView的忽略安全区域设置 #

如果业务场景允许，去掉ScrollView的.ignoresSafeArea()，让图片被限制在安全区域内，不会延伸到按钮所在的右上角区域：

ScrollView {
    Image("home1")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .matchedGeometryEffect(id: "image", in: namespace)
        .frame(height: 350)
}
.background(Color("Background"))
// 移除.ignoresSafeArea()

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