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

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

CodePudding user response：

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

CodePudding user response：

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