如何阻止键盘破坏 SwiftUI 视图中的布局？

Question

我遇到了一些问题，我自己很难解决，希望得到你的帮助:)

我编写了一个应用程序。不幸的是，当我调用键盘时，布局被破坏了。我能做些什么？我测试了从约束到安全区域和一些图书馆的所有内容，但到目前为止没有任何效果

提前感谢大家的帮助:)

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)
                    .ignoresSafeArea()

                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()
                }
                .ignoresSafeArea(.keyboard, edges: .bottom)
            }
        }
        .navigationBarBackButtonHidden(true) // Behält das Ausblenden des standardmäßigen "Zurück"-Buttons bei
    }
}

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()
    }
}

Answer 1

我找到了解决方案。您应该将图像从 ZStack 移动到 ScrollView 的 .background 中。并将

.navigationBarBackButtonHidden(true)

添加到您的 NavigationView。

var body: some View {
                NavigationView {
                    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()
                    }
                    .background {
                        Image(backgroundImage)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .ignoresSafeArea()
                    }
                    .ignoresSafeArea(.keyboard)
                }
                .navigationBarBackButtonHidden(true)
            }