SwiftUI弹出Sheet时忽略Safe Area：解决键盘弹出布局异常问题

在带Home指示器的设备（比如iPhone 15 Pro）上，Sheet底部会自动添加安全区域（Safe Area），无键盘时显示正常，但键盘弹出后视图布局错乱——安全区域的内边距好像被分摊到了视图的上下区域。为了看清新增的白色内边距，我把背景设为黄色，试了各种ignoresSafeArea()的组合，还是没法做到没有额外内边距。

示例代码 #

import SwiftUI

struct TestSheetHeight: View {
    
    @State var showCard: Bool = false
    
    var body: some View {
        
        Button(action: {
            showCard.toggle()
        }, label: {
            Text("Show the Card")
        })
        .sheet(isPresented: $showCard, content: {
            CardView()
        })
        
    }
}


struct CardView: View {
    
    @State var height: CGFloat = 0
    @State var textField: String = ""
    
    var body: some View {
        
        VStack {
            Text("Line A")
            Text("Line B")
            Text("Line C")
            TextField(text: $textField) {
                Text("Test")
            }
            .padding(.horizontal)
        }
        .background {
            GeometryReader { geometry in
                Color.yellow
                    .onChange(of: geometry.size) {
                        height = geometry.size.height
                    }
                    .ignoresSafeArea()
            }
        }
        .presentationDetents([.height(height)])
    }
}

截图状态说明 #

• iPhone SE无键盘状态：黄色背景铺满Sheet，无额外内边距，显示正常
• iPhone SE有键盘状态：布局正常，黄色背景仍铺满整个Sheet区域
• iPhone 15 Pro无键盘状态：底部存在安全区域，但黄色背景铺满Sheet，显示正常
• iPhone 15 Pro有键盘状态：视图上下出现白色内边距，黄色背景被压缩，布局错乱

解决方案 #

问题核心是动态监听视图尺寸设置presentationDetents的逻辑，与系统安全区域处理产生冲突。可以通过以下两种方式修复：

方案1：使用系统预设Detent（推荐） #

直接用系统提供的.medium或.large等预设Detent，避免手动计算高度带来的冲突，同时正确处理安全区域：

struct CardView: View {
    
    @State var textField: String = ""
    
    var body: some View {
        VStack {
            Text("Line A")
            Text("Line B")
            Text("Line C")
            TextField(text: $textField) {
                Text("Test")
            }
            .padding(.horizontal)
        }
        .background(Color.yellow)
        .ignoresSafeArea()
        .presentationDetents([.medium])
        .presentationDragIndicator(.visible)
    }
}

方案2：自定义固定高度（需适配安全区域） #

如果必须用自定义高度，直接基于内容高度+安全区域底部间距计算，避开动态尺寸监听：

struct CardView: View {
    
    @State var textField: String = ""
    // 获取设备底部安全区域高度
    private let safeAreaBottom = UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0
    // 自定义内容高度（根据实际内容调整）
    private let contentHeight: CGFloat = 200
    
    var body: some View {
        VStack {
            Text("Line A")
            Text("Line B")
            Text("Line C")
            TextField(text: $textField) {
                Text("Test")
            }
            .padding(.horizontal)
        }
        .background(Color.yellow)
        .ignoresSafeArea()
        .presentationDetents([.height(contentHeight + safeAreaBottom)])
        .presentationDragIndicator(.visible)
    }
}

修复原理 #

1. 手动通过GeometryReader监听尺寸时，键盘弹出会触发视图尺寸重计算，此时系统安全区域逻辑与自定义高度逻辑冲突，导致内边距被错误分摊。
2. 将ignoresSafeArea应用到根视图，让背景完全覆盖安全区域，避免系统自动添加额外内边距。
3. 添加presentationDragIndicator可让系统正确识别Sheet顶部边界，减少布局错乱概率。

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