web-dev-qa-db-fra.com

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

Je veux changer la couleur de l'espace réservé du TextField, mais je ne trouve pas de méthode pour cela.

J'ai essayé de définir foregroundColor et 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 qu'il n'y a pas encore d'API pour cela?

swiftswiftui
15
Ilya Kharabet

Il n'y a pas encore d'api pour ça. MAIS VOUS POUVEZ:

Utilisez ZStack et implémentez vous-même un espace réservé:

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

Maintenant, vous pouvez utiliser n'importe quel type d'édition comme un boss.

- TextField personnalisé

Vous pouvez toujours créer vos propres Views personnalisés à 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 espace réservé):

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

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

Finalement, un ViewModifier qui incorpore le contenu dans un ZStack est plus élégant et 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)            
        }
    }
}

Usage:

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