0

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

  • 1
    Have you tried putting it in a `ScrollView`? The OS tries to do the right thing, and keep the view that has focus where it can be seen when the keyboard appears. The other thing you can try is set a listener on the keyboard, and shrink your image when the keyboard appears so you can still see everything, but remember, this will be different for different devices. You could also try `ViewThatFits`, and just provide an alternate view to show. But, you only have so much room. – Yrb Jun 14 '23 at 13:35
  • yeah I tried with scrollView and its working as expected but my employer wants me to do it without Scrollview and I have one other view where scrollView will not work – Iftikhar Hussain Orakzai Jun 15 '23 at 04:27
  • Well, then you have option 2 above. – Yrb Jun 15 '23 at 16:02

0 Answers0