Comment ajouter du texte d'espace réservé à TextEditor dans SwiftUI?

Ce n'est pas possible dès le départ, mais vous pouvez obtenir cet effet avec ZStack ou la propriété .overla y.

Ce que vous devez faire est de vérifier la propriété détenant votre état. S'il est vide, affichez votre texte d'espace réservé. Si ce n'est pas le cas, affichez plutôt le texte saisi.

Et voici un exemple de code:

TextEditor(text: stringProperty)        
        .opacity(stringProperty.isEmpty ? 0.25 : 1)

Remarque: J'ai volontairement laissé le style .font et .padding pour que vous voyiez qu'il devrait correspondre à la fois sur TextEditor et sur Text.

EDIT: En gardant à l'esprit les deux problèmes mentionnés dans le commentaire de Legolas Wang, voici comment les problèmes d'alignement et d'opacité pourraient être traités:

• Pour que le texte commence à gauche de la vue, enveloppez-le simplement dans HStack et ajoutez Spacer immédiatement après comme ceci:

HStack {
   Text("Some placeholder text")
   Spacer()
}

• Afin de résoudre le problème d'opacité, vous pouvez jouer avec l'opacité conditionnelle - le moyen le plus simple serait d'utiliser l'opérateur ternaire comme celui-ci:

ZStack(alignment: .leading) {
    if email.isEmpty {
        Text(Translation.email)
            .font(.custom("Helvetica", size: 24))
            .padding(.all)
    }
    
    TextEditor(text: $email)
        .font(.custom("Helvetica", size: 24))
        .padding(.all)
}

Bien sûr, cette solution n'est qu'une solution de contournement stupide jusqu'à ce que le support soit ajouté pour TextEditors.

Jusqu'à ce que nous ayons un support API, une option serait d'utiliser la chaîne de liaison comme espace réservé et onTapGesture pour la supprimer

TextEditor(text: self.$note)
                .padding(.top, 20)
                .foregroundColor(self.note == placeholderString ? .gray : .primary)
                .onTapGesture {
                    if self.note == placeholderString {
                        self.note = ""
                    }
                }

J'ai créé une vue personnalisée qui peut être utilisée comme celle-ci (jusqu'à ce que TextEditor le prenne officiellement en charge - peut-être l'année prochaine)

struct TextArea: View {
    private let placeholder: String
    @Binding var text: String
    
    init(_ placeholder: String, text: Binding<String>) {
        self.placeholder = placeholder
        self._text = text
    }
    
    var body: some View {
        TextEditor(text: $text)
            .background(
                HStack(alignment: .top) {
                    text.isBlank ? Text(placeholder) : Text("")
                    Spacer()
                }
                .foregroundColor(Color.primary.opacity(0.25))
                .padding(EdgeInsets(top: 0, leading: 4, bottom: 7, trailing: 0))
            )
    }
}

extension String {
    var isBlank: Bool {
        return allSatisfy({ $0.isWhitespace })
    }
}

Solution complète ci-dessous:

TextArea("This is my placeholder", text: $text)

J'utilise le remplissage par défaut de TextEditor ici, mais n'hésitez pas à vous adapter à vos préférences.

Comme je le sais, c'est la meilleure façon d'ajouter un texte d'espace réservé à TextEditor dans SwiftUI

struct ContentView: View {
    @State var text = "Type here"
    
    var body: some View {

        TextEditor(text: self.$text)
            // make the color of the placeholder gray
            .foregroundColor(self.text == "Type here" ? .gray : .primary)
            
            .onAppear {

                // remove the placeholder text when keyboard appears
                NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { (noti) in
                    withAnimation {
                        if self.text == "Type here" {
                            self.text = ""
                        }
                    }
                }
                
                // put back the placeholder text if the user dismisses the keyboard without adding any text
                NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { (noti) in
                    withAnimation {
                        if self.text == "" {
                            self.text = "Type here"
                        }
                    }
                }
            }
    }
}

Il y a de bonnes réponses ici, mais je voulais évoquer un cas particulier. Lorsqu'un TextEditor est placé dans un formulaire, il y a quelques problèmes, principalement avec l'espacement.

1. TextEditor ne s'aligne pas horizontalement avec d'autres éléments de formulaire (par exemple, TextField)
2. Le texte de l'espace réservé ne s'aligne pas horizontalement avec le curseur TextEditor.
3. Lorsqu'il y a des espaces ou des retours chariot / nouvelle ligne sont ajoutés, l'espace réservé se repositionne au milieu vertical (facultatif).
4. L'ajout d'espaces de début fait disparaître l'espace réservé (facultatif).

Une façon de résoudre ces problèmes:

Form {
    TextField("Text Field", text: $text)

    ZStack(alignment: .topLeading) {
        if comments.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
            Text("Long Text Field").foregroundColor(Color(UIColor.placeholderText)).padding(.top, 8)
        }
        TextEditor(text: $comments).padding(.leading, -3)
    }
}