SwiftUI中sheet的ignoresSafeArea使用方法及输入框聚焦后主视图偏移问题咨询

嗨，我来帮你搞定这个SwiftUI的小坑～

首先咱们得弄明白为啥会出现这种怪事：你给主视图加了.ignoresSafeArea(.keyboard)，本意是想处理键盘的影响，但这个设置完全用错地方了！主视图和sheet是两个独立的层级，主视图的键盘忽略设置不仅管不到sheet里的输入框，反而会让主视图自己的布局逻辑混乱——当键盘弹出时，主视图因为忽略了键盘的安全区域，系统会错误地将主视图向上偏移，也就出现了你看到的绿色矩形从顶部“跑出来”的情况。

接下来直接给你解决办法，分两步走：

• 删掉主视图上的.ignoresSafeArea(.keyboard)
  这个设置在这里纯粹是帮倒忙，去掉它之后主视图的布局就不会被键盘干扰了。

• 给sheet的内容做正确的键盘适配
  把键盘适配的逻辑放到sheet内部，给sheet的根视图加上.ignoresSafeArea(.keyboard, edges: .bottom)，这样sheet里的输入框在聚焦时，会自动调整到键盘上方，同时完全不会影响主视图。

修改后的完整代码如下：

struct ContentView: View {
    let colors: [Color] = [.green, .red, .blue, .pink, .purple]
    @State private var sheetShown = false
    @State private var q = ""
    
    var body: some View {
        NavigationStack {
            VStack {
                ForEach(colors, id: \.self) { color in
                    Rectangle()
                        .fill(color)
                        .frame(height: 120)
                }
                Spacer()
                Button {
                    sheetShown = true
                } label: {
                    Text("Show Sheet")
                }
                .buttonStyle(.borderedProminent)
            }
            // 移除了这里的.ignoresSafeArea(.keyboard)
            .padding()
        }
        .sheet(isPresented: $sheetShown) {
            VStack {
                Text("hello")
                TextField("Search", text: $q)
                    .textFieldStyle(.roundedBorder)
                    .padding(.horizontal)
            }
            .padding()
            // 给sheet添加键盘安全区域适配
            .ignoresSafeArea(.keyboard, edges: .bottom)
        }
    }
}

#Preview {
    ContentView()
}

如果你的sheet里有很多内容，还可以用ScrollView包裹sheet的内部视图，这样键盘弹出时，ScrollView会自动滚动内容保证输入框可见，体验会更流畅：

.sheet(isPresented: $sheetShown) {
    ScrollView {
        VStack {
            Text("hello")
            TextField("Search", text: $q)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)
            // 可以添加更多内容测试滚动效果
            ForEach(0..<20) { i in
                Text("列表项 \(i)")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(.gray.opacity(0.1))
            }
        }
        .padding()
    }
    .ignoresSafeArea(.keyboard, edges: .bottom)
}

这样修改之后，你再点击sheet里的输入框，主视图就不会再出现偏移的情况，sheet里的输入框也能完美适配键盘啦～

内容来源于stack exchange