Multiline TextField/TextEditor in SwiftUI for MacOS in forms-CodePudding

The

Then I tried a TextEditor, but this lacks the ability to define a label. The placement of the label is what makes the Form element extremly usefull for MacOS as it allows the right alignment of the labels without any hacks. The missing border style is only a small issue that can probably solved using border styles:

struct ContentView: View { @State var field1 = "" @State var field2 = "" @State var notes = "" var body: some View { Form { TextField("Label", text: $field1) TextField("Long Label", text: $field2) TextEditor(text: $notes) } .padding() .frame(height: 150) } }

I'm only interested in a clean solution that is future-proof. If there's none, a hack must be at least very flexible, i.e. all the labels must be correctly aligned. The solution from workingdog doesn't fit for me, because as soon as the label text changes, everything falls apart.

CodePudding user response：

How about this type of approach (adjust to your needs):

struct ContentView: View { @State var field1 = "" @State var field2 = "" @State var notes = "" var body: some View { VStack (alignment: .leading, spacing: 20) { Form { TextField("Label", text: $field1) TextField("Long Label", text: $field2) } HStack (alignment: .top) { Spacer().frame(width: 30) Text("Notes") TextEditor(text: $notes).frame(height: 200) } } .padding() .frame(height: 400) } }

CodePudding user response：

I personally prefer putting same view with overlay in such cases, like this:

Form { TextField("Label", text: $field1) TextField("Long Label", text: $field2) TextEditor(text: $notes) .overlay( TextEditor(text: .constant("label")) .allowsHitTesting(false) .opacity(notes.isEmpty ? 1 : 0) ) }

The disadvantage is that TextEditor does not work like most other SwiftUI views: it draws the default background itself. You can use this hack to make the cursor visible through the overlay and draw the background yourself on the main TextEditor.