SwiftUI视图键盘弹出致布局错乱，寻求有效解决方案

问题根源 #

你的代码中ScrollView添加了.ignoresSafeArea(.keyboard, edges: .bottom)，这会阻止SwiftUI自动调整键盘弹出时的安全区域，导致底部内容被键盘挤压，出现布局错乱。

修复步骤 #

1. 移除键盘安全区域忽略设置
   删除ScrollView上的.ignoresSafeArea(.keyboard, edges: .bottom)，让SwiftUI默认处理键盘弹出时的布局适配，ScrollView会自动上移内容以避免被键盘遮挡。

2. 优化背景图布局
   给背景图添加.edgesIgnoringSafeArea(.all)，确保它始终填充整个屏幕，不受安全区域和键盘弹出的影响。

修改后的完整代码 #

import SwiftUI

struct RegisterUserView: View {
    @State private var username = ""
    @State private var email = ""
    @State private var password = ""
    @State private var confirmPassword = ""
    @State private var isTermsAccepted = false

    let backgroundImage = "backgroundlogin"

    var body: some View {
        NavigationView {
            ZStack {
                Image(backgroundImage)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)

                ScrollView {
                    VStack(spacing: 20) {
                        Text("Neuer Account")
                            .foregroundColor(.black)
                            .font(.custom("Avenir", size: 40))
                            .fontWeight(.bold)

                        VStack(alignment: .leading, spacing: 15) {
                            TextField("Dein Name", text: $username)
                                .padding()
                                .background(Color.white.opacity(0.7))
                                .cornerRadius(10)
                                .font(.custom("Avenir", size: 18))
                                .padding(.horizontal, 40)

                            TextField("E-Mail", text: $email)
                                .padding()
                                .background(Color.white.opacity(0.7))
                                .cornerRadius(10)
                                .font(.custom("Avenir", size: 18))
                                .padding(.horizontal, 40)

                            SecureField("Passwort", text: $password)
                                .padding()
                                .background(Color.white.opacity(0.7))
                                .cornerRadius(10)
                                .font(.custom("Avenir", size: 18))
                                .padding(.horizontal, 40)

                            SecureField("Passwort bestätigen", text: $confirmPassword)
                                .padding()
                                .background(Color.white.opacity(0.7))
                                .cornerRadius(10)
                                .font(.custom("Avenir", size: 18))
                                .padding(.horizontal, 40)

                            HStack {
                                CheckboxView(isChecked: $isTermsAccepted)
                                Text("Ich akzeptiere die AGBs und die Datenschutzbedingungen")
                                    .foregroundColor(.white)
                                    .font(.custom("Avenir", size: 18))
                            }
                            .padding(.horizontal, 20)
                            .padding(.vertical, 20)
                        }
                        .padding(.horizontal)

                        Button("Registrieren") {
                            // Registrierungslogik hier einfügen
                        }
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.blue)
                        .cornerRadius(10)
                        .disabled(!isTermsAccepted)
                    }
                    .padding()
                }
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

struct CheckboxView: View {
    @Binding var isChecked: Bool

    var body: some View {
        Image(systemName: isChecked ? "checkmark.square.fill" : "square")
            .foregroundColor(isChecked ? .blue : .gray)
            .onTapGesture {
                self.isChecked.toggle()
            }
    }
}

struct RegisterUserView_Previews: PreviewProvider {
    static var previews: some View {
        RegisterUserView()
    }
}

额外优化建议 #

如果需要更精准控制键盘弹出时的布局，可以监听键盘通知获取高度变化，结合ScrollViewReader将当前编辑的输入框滚动到可视区域，但上述基础修复已能解决绝大多数场景的问题。

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