Hello, I am struggling with the forms for some hours now and I can't find the solution.
Basically I would like to use a simple form element where the user can enter a name. The TextField is embedded in a Section with a header:
import SwiftUI
struct TestFormHeight: View {
@State var babyName = "Little Monkey"
var body: some View {
ScrollView {
HStack {
Spacer()
VStack(alignment: .center) {
Form {
Section(header: Text("First Line\nSecond Line\nThird Line\nFourth Line")) {
HStack {
TextField(
"Baby Name",
text: $babyName
)
.onSubmit { }
.textInputAutocapitalization(.words)
.disableAutocorrection(true)
.border(.clear)
.multilineTextAlignment(.center)
}.labelsHidden()
}
}
.cornerRadius(8)
.frame(height: 140)
.padding(.trailing)
.padding(.leading)
.moveDisabled(true)
}
Spacer()
}
}
}
}
struct TEST_Previews: PreviewProvider {
static var previews: some View {
TestFormHeight()
}
}
The problem is that I don't want to use
.frame(height: 140)
Instead I would like the form and section to wrap the contents. But if I remove the frame, it seems like the height is reduced to 0 - or in other words, it just disappears. Also using maxHeight and other combinations did not help.
Basically 140 does work for a standard case, but once I use localizations with possible longer texts for the header, it's breaking the layout and you can scroll within the form. The same if you use a bigger font size.
For simplicity I removed not relevant UI parts from the example but kept the boxed structure (Stacks).
Is there a way to make the form wrap the contents without setting an explicit height?