How to stop View content from moving up when we open keyboard?

I want the view content not moves up when I open the keyboard I have more content in the view so it push the top content out of the screen and I want it unchanged when the keyboard is open or closed.

I tried this solution but its not working in my case on small screen the content goes out of screen . Its only works if we have less content inside view .

My Code

struct ContentView34: View {
    @State var phoneNumber = ""
    var body: some View {
        ZStack{
            VStack{
                Image("homeIcon")
                    .resizable()
                    .frame(width:Constants.width*0.6,height: Constants.width*0.5)
                    .padding()
                Text("Enter your phone number")
                    .font(.custom("Inter-Medium", size: 20))
                    .fontWeight(.medium)
                Text("Sign in with Apple id or Gmail")
                    .foregroundColor(.gray)
                    .font(.custom("Inter-Regular", size: 15))
                    .font(.caption)
                    .padding(.top,0.2)
                ZStack{
                    RoundedRectangle(cornerRadius: 5)
                        .stroke(Color("blue"))
                        .frame(width: 90,height:50)
                    Text("Mobile")
                        .foregroundColor(.blue)
                        .font(.caption2)
                        .padding(.horizontal,10)
                        .background(Color.white)
                        .frame(width: 90,height:70,alignment: .topLeading)
                    HStack{
                        Group{
                            Image("flag")
                            Text("+44")
                                .font(.custom("Inter-Medium", size: 15))
                            Image(systemName: "arrowtriangle.down.fill")
                                .resizable()
                                .foregroundColor(.blue)
                                .frame(width: 10, height: 6)
                                .padding(0)
                        }
                        Divider()
                            .frame(width:2 ,height: 25)
                            .background(Color.gray.opacity(0.5))
                        TextField("Enter phone number", text: $phoneNumber)
                            .font(.custom("Inter-Medium", size: 15))
                            .padding()
                            .foregroundColor(Color("dayNightText"))
                            .keyboardType(.numberPad)
                        Spacer()
                    }
                    .frame(width: Constants.width*0.9,height: 50)
                    .padding(.leading)
                }
                .padding(.vertical)
                ZStack{
                    VStack{
                        Button {
                            
                        } label: {
                            HStack{
                                Spacer()
                                Text("Sign in with Apple")
                                    .font(.custom("Inter-Medium", size: 14))
                                Spacer()
                            }
                            .frame(width: Constants.width * 0.6, height: 45)
                            .foregroundColor( .white)
                            .background(Color.black)
                            .cornerRadius(5)
                            .overlay(
                                Image("apple")
                                    .resizable()
                                    .renderingMode(.template)
                                    .foregroundColor(.white)
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width:25,height:25)
                                    .frame(width: 50,height:45,alignment: .leading)
                            )
                        }
                        .padding(.vertical)
                        Button {
                            
                        } label: {
                            HStack{
                                Spacer()
                                Text("Sign in with Google")
                                    .font(.custom("Inter-Medium", size: 14))
                                Spacer()
                            }
                            .frame(width: 60,height:45)
                            .foregroundColor(.white)
                            .background(Color("blue"))
                            .cornerRadius(5)
                            .overlay(
                                Image("google")
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width:25,height:25)
                                    .frame(width: 50,height:45,alignment: .leading)
                            )
                        }
                    }
                    Text("Testing1")
                    Text("Testing1")
                    Text("Testing1")
                    Spacer()
                }
                .navigationBarHidden(true)
                .padding()
                .background(Color.white)
            }
             .ignoresSafeArea(.keyboard, edges: .bottom)
        }
    }
}

struct ContentView34_Previews: PreviewProvider {
    static var previews: some View {
        ContentView34()
    }
}

When keyboard is closed

enter image description here

When keyboard is open the image top cuts

enter image description here

Upvotes: 0

Views: 553

Answers (0)

Related Questions