swiftswiftui

Dynamic row hight containing TextEditor inside a List in SwiftUI


I have a List containing a TextEditor

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

    var body: some View {
        List((1...10), id: \.self) { _ in
            TextEditor(text: $text)
        }
    }
}

But it's items are not growing on height change of the TextEditor. I have tried .fixedSize() modifier with no luck. What am I missing here?


Solution

  • iOS 13

    You can use an invisible Text in a ZStack to make it dynamic.

    struct ContentView: View {
        @State var text: String = "test"
    
        var body: some View {
            List((1...10), id: \.self) { _ in
                ZStack {
                    TextEditor(text: $text)
                    Text(text).opacity(0).padding(.all, 8) // <- This will solve the issue if it is in the same ZStack
                }
            }
        }
    }
    

    Note that you should consider changing font size and other properties to match the TextEditor

    Preview


    iOS 16

    If you are just looking for a vertical growing input field, there is a parameter called axis in TextField that causes the field to grow vertically if needed:

    TextField("", text: $text, axis: .vertical)
    

    Note that if you test with the mac keyboard, you need to hold option for new lines.