.ignoresSafeArea(.keyboard) 不阻止视图向上推

Question

我正在尝试修复一个 UI 行为，即当点击文本字段并且键盘出现时，视图会向上推。

当我不包含BackgroundView()时，

.ignoresSafeArea(.keyboard)修复了它

但是，当代码中有BackgroundView()时，.ignoresSafeArea(.keyboard)就不起作用了。

这是我的代码：

struct Home: View {
    
    @State private var email: String = ""
    @State private var password: String = ""
    
    
    var body: some View {
        
        NavigationView {
            ZStack {
                
                BackgroundView()
                
                VStack {
                                        
                    VStack {
                        Spacer()
                        
                        
                        VStack {
                            
                            Text("Email or Username")
                                .font(.title)
                                .fixedSize(horizontal: false, vertical: true)
                                .minimumScaleFactor(0.7)
                                .lineLimit(1)
                                .truncationMode(.tail)
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .padding(.leading)
                                .offset(y: 10)
                            
                            
                            ZStack {
                                Color.gray
                                
                                TextField("Email or Username", text: $email)
                                    .textContentType(.emailAddress)
                                    .keyboardType(.emailAddress)
                                    .font(.title)
                                    .fixedSize(horizontal: false, vertical: true)
                                    .minimumScaleFactor(0.7)
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                                    .padding(.leading)
                                
                            }
                            .frame(width: 300, height: 80)
                            .cornerRadius(25)
                        }
                        
                        VStack {
                            
                            Text("Password")
                                .font(.title)
                                .fixedSize(horizontal: false, vertical: true)
                                .minimumScaleFactor(0.7)
                                .lineLimit(1)
                                .truncationMode(.tail)
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .padding(.leading)
                                .offset(y: 10)
                            
                            
                            ZStack {
                                Color.gray
                                
                                SecureField("Password", text: $password)
                                    .font(.title)
                                    .textContentType(.password)
                                    .fixedSize(horizontal: false, vertical: true)
                                    .minimumScaleFactor(0.7)
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                                    .padding(.leading)
                                
                            }
                            .frame(width: 300, height: 80)
                            .cornerRadius(25)
                        }
                        
                        
                        Spacer()
                        
                        VStack {
                            
                            Button(action: {
                                print("Login Tapped")
                            }) {
                                
                                Text("Login")
                                    .font(.title)
                                    .fixedSize(horizontal: false, vertical: true)
                                    .minimumScaleFactor(0.7)
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                            }
                        }
                        .padding(.bottom, 50)
                    }
                }
            }
            .ignoresSafeArea(.keyboard)
        }
    }
}

struct BackgroundView: View {
    
    var body: some View {
        VStack {
            ZStack {
                Circle()
                    .fill(.green)
            }
            .frame(width: UIScreen.screenWidth * 1.00, height: UIScreen.screenHeight * 1.00)
            
            Spacer()
        }
        .ignoresSafeArea()
    }
}

我该如何解决这个问题？我希望键盘永远不会推高视图。

Answer 1

问题在于BackgroundView 本身。只需拆下其框架即可。如果你想让它居中，请删除 VStack 和 Spacer：

struct BackgroundView: View {
    
    var body: some View {
        ZStack {
            Circle()
                .fill(.green)
        }
        .ignoresSafeArea()
    }
}