Extend SwiftUI's TextEditor within Form to use remaining space - swift

Question

I'm using a TextEditor inside a Form. A minimal playground example would be
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
#State var text = String()
var body: some View {
Form {
Section("Section") {
Toggle("Toggle", isOn: .constant(true))
LabeledContent("TextEditor") {
TextEditor(text: $text)
}
}
}
}
}
PlaygroundPage.current.setLiveView(ContentView())
This renders into something like:
As TextEditor is a multiline input field, I'd like it to extend to the remaining available space on the screen, so something like
I can achieve this by adding a .frame(height:540) modifier to the TextEditor, however this hardcodes the extend is not very dynamic and thus only works on a specific device.
So the question is, how to to this in a dynamic way which works on all potential devices (different iPhones, iPad, ...).
Note: This question is similar to SwiftUI Texteditor in a form. However this only addresses the issue how to get it to show multiple lines, which can be easily achieved using the above mentioned .frame(height:X) modifier.

Answer 1

I don't think this is the best solution, although it works. If you want something else, try using GeometryReader with a dynamic height value stored in a CGFloat variable. (Tested on iPhone 14 Pro, 14 Pro Max and iPad 12.9 inch)
UISCREEN SOLUTION
import SwiftUI
struct ContentView: View {
#State var text = String()
var body: some View {
if #available(iOS 16, *){
Form {
Section("Section") {
Toggle("Toggle", isOn: .constant(true))
LabeledContent("TextEditor") {
TextEditor(text: $text)
}.frame(minHeight: UIScreen.main.bounds.maxY-190)
}
}
}
}
}
You can also use constant points, as the points reflect different screen sizes and resolutions: https://stackoverflow.com/a/73653966/14856451
GEOMETRY READER SOLUTION
#State var text = String()
#Environment(\.defaultMinListRowHeight) var minH
var body: some View {
if #available(iOS 16, *){
GeometryReader {geometry in
Form {
Section("Section") {
Toggle("Toggle", isOn: .constant(true))
LabeledContent("TextEditor") {
TextEditor(text: $text)
}.frame(minHeight: geometry.size.height-minH-70)
}
}
}
}
}
Notice the blue outline - that's the size of your form. As you can see in all three cases, the TextField reaches the bottom of the form without going into the safe zone, which is used to control gestures on the device (there are no gestures on the iPhone SE, so there is no safe zone either).