Create a multi-line, editable textual content view utilizing TextEditor in SwiftUI. – iOSTutorialJunction

In UIKit, we use UITextView for enter fields that require lengthy textual content entries from the person. In SwiftUI, we are able to accomplish the identical with TextEditor. The TextEditor view in SwiftUI handles multiline textual content enter. On this tutorial, we are going to discover ways to use TextEditor with a placeholder, making it perform equally to a UITextView in UIKit.

Step-by-Step Implementation of multi-line editable textual content discipline in SwiftUI

Step 1: Open Xcode and choose “Create a brand new Xcode challenge.“. Select “App” below the iOS tab.Identify your challenge and ensure “SwiftUI” is chosen for the Consumer Interface.

Step 2: Create a state variable named multiLineText.

import SwiftUI

struct FeedbackView: View {
   @State personal var multiLineText = ""
   var physique: some View {
   }

}

Step 3: Let begin designing our multi-line textual content discipline in SwiftUI utilizing TextEditor.

• First we are going to take VStack with alignment to main as we would like our view to to not be in centre of display screen however towards the forefront.
• Add a Textual content view with title “Remark” illustrating person the he can add feedback under
• Take a ZStack with alignment to topLeading and inside it first we are going to add a RoundedRectangle view in order that we can provide border to our TextEditor. Then will verify if state variable named multiLineText is empty or not. If it’s empty we are going to add placeholder textual content utilizing Textual content view.
• Lastly we are going to add TextEditor to our ZStack. Lastly we are going to change opacity of TextEditor if it’s empty with a view to let placeholder Textual content seen to person.

Full code snippet is given under.

import SwiftUI

struct ContentView: View {
    @State personal var multiLineText = ""
    var physique: some View {
        VStack(alignment: .main) {
            Textual content("Remark")
                .font(.system(dimension: 14.0, weight: .medium))
            ZStack(alignment: .topLeading) {
                RoundedRectangle(cornerRadius: 14, fashion: .steady)
                    .strokeBorder(Colour.crimson.opacity(0.6), lineWidth: 1)
                if multiLineText.isEmpty {
                    Textual content("Placeholder Textual content")
                        .foregroundColor(Colour.grey)
                        .font(.system(dimension: 14.0, weight: .common))
                        .padding(.horizontal, 8)
                        .padding(.vertical, 12)
                }
                TextEditor(textual content: $multiLineText)
                    .font(.system(dimension: 14.0))
                    .opacity(multiLineText.isEmpty ? 0.7 : 1)
                    .padding(4)
                
            }
            .body(peak: 135)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Output of utilizing TextEditor with Placeholder in SwiftUI

This code snippets provides you with a multi-line editable textual content discipline in SwiftUI with a placeholder that disappears as soon as the person begins typing and re – seems if its empty