Search code examples
iosswiftswiftuiswiftui-texteditor

SwiftUI TextEditor internal scroll padding without text cropping


Im building note view with footer over whole UI

var body: some View {
    ZStack(alignment: .bottom) {
        VStack(alignment: .leading) {
            Text("\(note.date.formatted())")
                .padding([.leading, .trailing])
                
            TextEditor(text: $note.text)
                .padding()
            }
            
            Footer {}
    }
}

There is title text with date, TextEditor and a Footer element. Footer just floats over TextEditor and blocks text from view. That's what i need, but here's catch

app

I need to add padding to TextEditor's internal scroll so text scrolls under footer element, but i can scroll up enough so i can see it all. If i add .padding([.bottom], 150) to TextEditor it just crops text and it looks ugly

enter image description here

in layman's terms i need the illusion that there is like 5 or so "\n" in the end of the text, but without adding "\n"


Solution

  • You might want to try contentMargins(_:for:) from iOS 17:

    TextEditor(text: $note.text)
        .padding()
        .contentMargins(.bottom, .init(top: 0, leading: 0, bottom: 50, trailing: 0)) //<- here