SwiftUI. Comment changer la couleur de l'espace réservé du TextField ?

Question

Je veux changer la couleur de l'espace réservé du champ de texte, mais je ne trouve pas de méthode pour le faire.

J'ai essayé de mettre foregroundColor y accentColor mais cela ne change pas la couleur de l'espace réservé.

Voici le code :

TextField("Placeholder", $text)
    .foregroundColor(Color.red)
    .accentColor(Color.green)

Peut-être n'y a-t-il pas encore d'API pour cela ?

Answer 1

Il n'y a pas d'api pour cela (encore). MAIS VOUS POUVEZ :

Utilice ZStack et implémentez vous-même un substitut :

var body: some View {
    ZStack(alignment: .leading) {
        if text.isEmpty { Text("Placeholder").foregroundColor(.gray) }
        TextField("", text: $text)
    }
}

Maintenant, vous pouvez utiliser n'importe quel type de montage comme un patron.

---

Encapsuler dans un champ de texte personnalisé

Vous pouvez toujours créer votre propre View à utiliser partout :

struct CustomTextField: View {
    var placeholder: Text
    @Binding var text: String
    var editingChanged: (Bool)->() = { _ in }
    var commit: ()->() = { }

    var body: some View {
        ZStack(alignment: .leading) {
            if text.isEmpty { placeholder }
            TextField("", text: $text, onEditingChanged: editingChanged, onCommit: commit)
        }
    }
}

utilisation ( TextField avec placeholder) :

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

    var body: some View {
        CustomTextField(
            placeholder: Text("placeholder").foregroundColor(.red),
            text: $text
        )
    }
}

Answer 2

Finalement, un ViewModifier qui incorpore le contenu dans un ZStack est plus élégant et nécessite moins de code :

public struct PlaceholderStyle: ViewModifier {
    var showPlaceHolder: Bool
    var placeholder: String

    public func body(content: Content) -> some View {
        ZStack(alignment: .leading) {
            if showPlaceHolder {
                Text(placeholder)
                .padding(.horizontal, 15)
            }
            content
            .foregroundColor(Color.white)
            .padding(5.0)            
        }
    }
}

Utilisation :

TextField("", text: $data)
.modifier(PlaceholderStyle(showPlaceHolder: data.isEmpty,
                           placeholder: "My Placeholder"))

Answer 3

C'est un peu une modification pour le La réponse de @jfk nous pouvons créer une extension pour view pour simplifier le code modificateur à l'intérieur de la vue principale et il peut également être utilisé pour Text y Image .

struct PlaceHolder<T: View>: ViewModifier {
    var placeHolder: T
    var show: Bool
    func body(content: Content) -> some View {
        ZStack(alignment: .leading) {
            if show { placeHolder }
            content
        }
    }
}

extension View {
    func placeHolder<T:View>(_ holder: T, show: Bool) -> some View {
        self.modifier(PlaceHolder(placeHolder:holder, show: show))
    }
}

Utilisation dans TextField :

Ajoutez cette ligne de code .placeHolder(Text("Your placeholder"), show: text.isEmpty) en tant que viewModifier a TextField .

TextField("", text: $text, onEditingChanged: { (changing) in
    print("Changing: \(changing)")
}, onCommit: {
    print("Committed!")
})
    .placeHolder(Text("Your placeholder"), show: text.isEmpty)

Utilisation en image :

De plus, comme @EmilioPelaez suggéré, j'ai modifié le code pour supporter le placeholder pour n'importe quelle vue par exemple. Image comme ci-dessous.

Image("your_image")
    .placeHolder(Image("placeholder_image"), show: true)

Answer 4

Si vous souhaitez conserver le TextField original et que cela ne vous dérange pas d'ajouter Introspect à votre projet ( https://github.com/siteline/SwiftUI-Introspect ), vous pouvez le faire en accédant à l'outil UIKit attributedPlaceholder :

TextField("Email", text: $email)
.introspectTextField { uiTextField in
    uiTextField.attributedPlaceholder = NSAttributedString(string: "placeholder text", 
    attributes: [NSAttributedString.Key.foregroundColor: UIColor.red])
}

Answer 5

Option 1 : Réponse courte TL;DR :

myUiTextField.attributedPlaceholder = NSAttributedString(string: placeHolderText, attributes: [NSAttributedString.Key.foregroundColor: placeHolderTextColor])

Explication de la réponse ci-dessus : En utilisant la chaîne attribuée qui est également suggérée par d'autres membres de la communauté ici.

Option 2 : réponse longue mais propre et extensible : Nous avons créé une classe d'extension dans notre projet avec la méthode suivante ayant des valeurs par défaut pour quelques paramètres afin de garder le code propre, extensible et réutilisable :

    import UIKit

    extension UITextField {

        /// Set the placeholder text properties of a UITextField
        /// - Parameters:
        ///   - placeHolder: text message for placeholder
        ///   - foregroundColor: text color (optional)
        ///   - fontSize: text font size (optional)
        func placeHolderSetup(placeHolder: String, foregroundColor: UIColor = UIColor.AppColors.zGreyColor, fontSize: CGFloat = 16)  {
            let str = NSAttributedString(string: placeHolder,
                                     attributes:[NSAttributedString.Key.foregroundColor:foregroundColor,NSAttributedString.Key.font: UIFont(name: AppFonts.zFontRegular, size: fontSize)!])

             self.attributedPlaceholder = str;
         }
     }

Exemple d'utilisation de la méthode ci-dessus :

searchTextField?.placeHolderSetup(placeHolder: "Search", foregroundColor: UIColor.white, fontSize: 14)