I am trying to create a messaging page layout but the keyboard hides the textfield and moves everything to the the top. I have looked at many tutorials online and replicated them exactly but none of them seem to work.

Here is all the code I have written:

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

I want the the textfield to move up as well as the messages in the scrollview but the top HStack with the user image and back/dismiss button should remain in place.

CodePudding user response：

You really have a lot of code in there - and two reasons to clean it up:

1. To get a good answer, you need to post a