ScrollViewReader .scrollTo method doesn't allow padding when scrolling to TextField - ios

Question

I'm using Xcode 13.2 and building for iOS 15.0 + with SwiftUI 3.0 and Swift 5
Here is my code:
ScrollViewReader { value in
VStack {
List(0..<things.count, id: \.self) { index in
VStack {
HStack {
Image(systemName: "circle")
TextField(
"Text Field",
text: $things[index]
)
.focused($focusField, equals: index)
.submitLabel(.next)
.onSubmit {
funcThatScrollsToLastInput()
}
}
}
.padding(.bottom, 20)
.id(index)
}
}
}
I have a ScrollView that on the return key, goes to the next TextField, which is great!
However, I cannot seem to add padding to the bottom of the TextField, nor to its wrapping HStack, VStack, or even if I add a rectangle, from within the confines of the stack that has the .id(index) modifier.
I want the TextField, when scrolled to, to have a padding(.bottom) of 10 or 20, but right now it's a 0.
It always seems to scroll exactly to the bottom the TextField originally had, or in other words without any style modifications.

Answer 1

You are confusing padding for the amount of scrolling that has occurred as a result of your changing the .focus(). Your list rows have 20 padding on them. That is just the visual space around the view using other views away.
The issue you are having is that when you programmatically change the .focus() on a TextField in a List, the TextField is scrolled to high above the keyboard. You could have 0 or 100 padding, and that behavior would not change.
The fix is to finish implementing the ScrollViewReader and add a .scrollTo() in your code. Since you did not post a Minimal, Reproducible Example (MRE), I just simply coded it in the .onSubmit()
.onSubmit {
// I made focusField an optional, so I had to safely unwrap. If your implementation is
// non-optional, then you don't need this.
guard let focusField = focusField else {
return
}
if focusField < things.count - 1 {
self.focusField = focusField + 1
// The DispatchQueue.main.asyncAfter(deadline:) is necessary because the .scrollTo()
// has to wait for the .focus() to finish its scroll
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
// If your implementation of focusField is non-optional, then change this to
// focusField + 1 as the one below is a local constant, so the implementation
// uses focusField + 2 as you want the cell below the current cell to be in view/
value.scrollTo(focusField + 2, anchor: .bottom)
}
}
}