iOS 15 键盘隐藏文本框

iOS 15 Keyboard hides textfield

我正在尝试创建消息页面布局,但键盘隐藏了文本字段并将所有内容移至顶部。我在网上看了很多教程并完全复制了它们,但其中 none 似乎有效。

这是我写的所有代码:

struct MessagingPage: View {
    var user: OfficialUserModel
    @ObservedObject private var vm = TheUserModel()
    @State var screenWidth = UIScreen.main.bounds.width
    @State var imageSize = UIScreen.main.bounds.width / 12
    @State var text = ""
    @State var show = false
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        NavigationView{
            ZStack{
                VStack{
                    
                    HStack{
                        Spacer()
                        
                        NavigationLink(destination: UserDisplayPage(user: user)) {
                                HStack{
                                    WebImage(url: URL(string: user.imageURL ))
                                        .resizable()
                                        .aspectRatio( contentMode: .fill)
                                        .frame(width: imageSize, height: imageSize
                                        )
                                        .cornerRadius(imageSize/2)
                                    
                                    VStack(alignment: .leading){
                                        Text(user.FullName)
                                            .font(.body)
                                            .fontWeight(.bold)
                                            .foregroundColor(.white)
                                        
                                        Text("\(user.City) , \(user.Country)")
                                            .font(.caption)
                                            .fontWeight(.semibold)
                                            .foregroundColor(.white)
                                    }
                                }
                        }
                        Spacer()
                        
                        HStack{
                            Button{
                                presentationMode.wrappedValue.dismiss()
                            } label: {
                                Image(systemName: "chevron.down")
                                    .font(.title)
                                    .foregroundColor(.myWhite)
                            }
                        }
                        .padding(.trailing)
                        
                    }
                    .padding(.top, 30)
                    .frame(height: 75)
                    .background(Color.mainBlack)
                    
                    ScrollView{
                        Spacer()
                        ForEach(0..<2){ num in
                            HStack{
                                Spacer()
                                HStack{
                                    Text("Hello \(user.firstName)")
                                        .foregroundColor(.orange)
                                }
                                .padding()
                                .background(Color.mainBlack)
                                .cornerRadius(15)
                                .shadow(color: .orange, radius: 2)
                            }
                            .padding(.horizontal)
                            .padding(.top, 8)
                        }
                        HStack{Spacer()}
                        
                        HStack{
                            HStack{
                                Text("\(user.FullName) is unable to recieve your message at this time. Please try again at a later time.")
                                    .foregroundColor(.green)
                            }
                            .padding()
                            .background(Color.mainBlack)
                            .cornerRadius(15)
                            .shadow(color: .green, radius: 2)
                            
                            Spacer()
                        }
                        .padding(.horizontal)
                        .padding(.top, 8)
                    
                    HStack{Spacer()}
                    }
                    .background(Color.mainBlack)
                    
                    ZStack{
                    HStack{
                        HStack{
                        
                        HStack{
                            TextField("Say Something...", text: self.$text)
                                .placeholder(when: text.isEmpty) {
                                    Text("Say Something...").foregroundColor(.myWhite.opacity(0.5))
                                }
                                .frame(width: screenWidth - 200, height: screenWidth/25)
                                .foregroundColor(.myCyan)
                                .accentColor(.myCyan)
                                .background(Color.mainBlack)
                                .textContentType(.emailAddress)
                            
                            if !text.isEmpty{
                                Button{
                                    print(text)
                                    self.text = ""
                                }label: {
                                    Image(systemName: "paperplane")
                                        .foregroundColor(.myCyan)
                                        .font(.system(size: 20))
                                }
                            }
                            else{
                                Button{
                                    print("Show more options")
                                }label: {
                                    Image(systemName: "plus")
                                        .foregroundColor(.myCyan)
                                        .font(.system(size: 20))
                                }
                            }
                           
                        }
                        .frame(width: screenWidth - 150, height: screenWidth/25)
                        .padding()
                        .background(Color.mainBlack)
                        .cornerRadius(30)
                        .shadow(color: .myCyan, radius: 5)
                        .padding(.bottom,5)
                    }
                    
                    }
                    .padding(.bottom, 50)
                    .frame(width: screenWidth)
                    }
                }
            }
            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            .background(Color.mainBlack)
            .navigationBarTitle("")
            .navigationBarHidden(true)
           
        }
        
    }
}

我希望文本字段和滚动视图中的消息一样向上移动,但带有用户图像的顶部 HStack 和 back/dismiss 按钮应该保留在原位。

确实 里面有很多代码 - 清理它的两个原因:

  1. 要获得好的答案,您需要 post 一个 minimal, reproducible example,这也可能有助于您在 post 编译之前调试代码
  2. 多行代码是多余的或无用的,例如:
  • 为什么使用 HStack{Spacer()} 之类的东西而不是 Spacer(),顺便说一句,在这种情况下不需要它?
  • 为什么有一个内部只有另一个堆栈的堆栈?

关于您的问题,问题在于冗余修饰符之一阻止文本文件向上移动,这是要删除的行:

.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)

为什么要设置与屏幕一样高和一样大的框架?这迫使文本字段留在底部。

我尝试做一些清理工作,我敢打赌还能做更多工作 - 请参阅下面的代码,现在键盘不再覆盖文本字段:

struct MessagingPage: View {

   // Removed some lines of code to reproduce your issue
    @State var screenWidth = UIScreen.main.bounds.width
    @State var imageSize = UIScreen.main.bounds.width / 12
    @State var text = ""
    @State var show = false
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        NavigationView{
            
            // What is the purpose of this ZStack???
            //            ZStack{
            VStack{
                
                HStack{
                    Spacer()
                    
                    NavigationLink(destination: Text("Hello")) {
                        Text("Top bar")
                    }
                    Spacer()
                    
                    HStack{
                        Button{
                            presentationMode.wrappedValue.dismiss()
                        } label: {
                            Image(systemName: "chevron.down")
                                .font(.title)
                                .foregroundColor(.white)
                        }
                    }
                    .padding(.trailing)
                    
                }
                .padding(.top, 30)
                .frame(height: 75)
                .background(Color.black)
                
                ScrollView{
                    
                    // All the views inside the Scrollview need to be inside a VStack
                    VStack {
                        
                        // Why this spacer???
                        //                        Spacer()
                        ForEach(0..<2){ num in
                            HStack{
                                Spacer()
                                HStack{
                                    Text("Hello username")
                                        .foregroundColor(.orange)
                                }
                                .padding()
                                .background(Color.black)
                                .cornerRadius(15)
                                .shadow(color: .orange, radius: 2)
                            }
                            .padding(.horizontal)
                            .padding(.top, 8)
                        }
                        HStack{Spacer()}
                        
                        HStack{
                            HStack{
                                Text("User is unable to receive your message at this time. Please try again at a later time.")
                                    .foregroundColor(.green)
                            }
                            .padding()
                            .background(Color.black)
                            .cornerRadius(15)
                            .shadow(color: .green, radius: 2)
                            
                            Spacer()
                        }
                        .padding(.horizontal)
                        .padding(.top, 8)
                        
                        // Why a Spacer inside an HStack???
                        // HStack{Spacer()}
                    }
                    .background(Color.black)
                }
                
                
                // What is the purpose of this ZStack???
                // ZStack{
                
                // Why an HStack that has only an HStack inside??
                // HStack{
                
                // Why an HStack that has only an HStack inside??
                
                // HStack{
                
                HStack{
                    TextField("Say Something...", text: self.$text)
                        .frame(width: screenWidth - 200, height: screenWidth/25)
                        .foregroundColor(.cyan)
                        .accentColor(.cyan)
                        .background(Color.white)
                        .textContentType(.emailAddress)
                    
                    if !text.isEmpty{
                        Button{
                            print(text)
                            self.text = ""
                        }label: {
                            Image(systemName: "paperplane")
                                .foregroundColor(.cyan)
                                .font(.system(size: 20))
                        }
                    }
                    else{
                        Button{
                            print("Show more options")
                        }label: {
                            Image(systemName: "plus")
                                .foregroundColor(.cyan)
                                .font(.system(size: 20))
                        }
                    }
                    
                }
                
                // Are you sure you want set the height of this stack based on the width?
                //                            .frame(width: screenWidth - 150, height: screenWidth/25)
                .frame(width: screenWidth - 150)
                .padding()
                .background(Color.black)
                .cornerRadius(30)
                .shadow(color: .black, radius: 5)
                .padding(.bottom,5)
                //                        }
                
                //                    }
                .padding(.bottom, 50)
                .frame(width: screenWidth)
                //                }
            }
            //            }
            
            // Why setting a frame that is high and large as much as the screen??
            // .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            .background(Color.black)
            .navigationBarTitle("")
            .navigationBarHidden(true)
            
        }
        
    }
}