How to add more padding bellow a TextView when the keyboard is shown

user_5052797 0
Viewed 150

When i have TextField inside ScrollView and tap on it the keyboard is shown as expected. But it seems that the TextField is moved up just enough to show the input area but i want to be moved enough so that is visible in its whole. Otherwise it looks cropped. I couldn't find a way to change this behaviour.

struct ContentView: View {
  @State var text:String = ""

  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        ForEach(1...12, id: \.self) {
          Text("\($0)…")
            .frame(height:50)
        }
        TextField("Label..", text: self.$text)
          .padding(10)
          .background(.white)
          .cornerRadius(10)
          .overlay(
            RoundedRectangle(cornerRadius: 10)
              .stroke(.blue, lineWidth: 1)
          )
      }
      .padding()
      .background(.red)
    }
  }
   
}

enter image description here

enter image description here

swiftui swift ios
2 Answers

Use a .safeAreaInset modifier.

  @State var text:String = ""

  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        ForEach(1...12, id: \.self) {
          Text("\($0)…")
            .frame(height:50)
        }
        TextField("Label..", text: self.$text)
          .padding(10)
          .background(.white)
          .cornerRadius(10)
          .overlay(
            RoundedRectangle(cornerRadius: 10)
              .stroke(.blue, lineWidth: 1)
          )
      }
      .padding()
      .background(.red)
    }.safeAreaInset(edge: .bottom) { //this will push the view when the keyboad is shown
        Color.clear.frame(height: 30)
    }
  }
user_69504150

You can provide additional padding to the view (and it works even in iOS 13 and 14):

struct ContentView: View {
  @State var text:String = ""

  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        ForEach(1...12, id: \.self) {
          Text("\($0)…")
            .frame(height:50)
        }
        TextField("Label..", text: self.$text)
          .padding(10)
          .background(.white)
          .cornerRadius(10)
          .overlay(
            RoundedRectangle(cornerRadius: 10)
              .stroke(.blue, lineWidth: 1)
          )
          .padding(.bottom, 32) //here, set as much pasding as you want
      }
      .padding()
      .background(.red)
    }
  }
   
}
user_145995750
Related