SwiftUI：如何让图片延伸至顶部安全区且不改变底部定位

核心思路是指定忽略安全区的边缘，同时调整图片布局逻辑，确保底部仍维持在原200像素的定位高度。以下是几种实用方案：

方案1：基于安全区高度调整图片总高度 #

通过GeometryReader获取顶部安全区高度，将图片总高度设为「需求的200像素 + 顶部安全区高度」，同时仅让图片忽略顶部安全区，既覆盖安全区又保证底部位置不变：

struct SafeAreaTest: View {
    var body: some View {
        GeometryReader { geo in
            VStack {
                Image("Banner")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(height: 200 + geo.safeAreaInsets.top)
                    .clipped()
                    .ignoresSafeArea(edges: .top)
                Spacer()
            }
        }
    }
}

方案2：占位区域+叠加层实现定位锁定 #

用透明占位块固定200像素的高度位置，再通过overlay让图片覆盖该区域并延伸至顶部安全区，从根源保证底部定位不偏移：

struct SafeAreaTest: View {
    var body: some View {
        VStack {
            Color.clear
                .frame(height: 200)
                .overlay(
                    Image("Banner")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .edgesIgnoringSafeArea(.top)
                        .frame(maxHeight: .infinity)
                )
                .clipped()
            Spacer()
        }
    }
}

方案3：ZStack直接锚定屏幕顶部 #

用ZStack将图片锚定在屏幕最顶部（含安全区），同时设置图片高度为「200像素 + 顶部安全区高度」，下方内容通过固定间距的Spacer保持原布局逻辑：

struct SafeAreaTest: View {
    var body: some View {
        ZStack(alignment: .top) {
            Image("Banner")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(height: 200 + (UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0))
                .ignoresSafeArea(edges: .top)
                .clipped()
            
            VStack {
                Spacer(minLength: 200)
                // 此处放置后续内容
                Spacer()
            }
        }
    }
}

以上方案均能满足你的需求：图片延伸覆盖顶部安全区，同时底部始终保持在原设计的200像素定位高度，不会暴露本该覆盖的屏幕区域。可根据自身布局结构选择适配性最强的方案。

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