web-dev-qa-db-fra.com

Swift UI Comment créer TextField qui accepte uniquement les nombres

Je suis nouveau sur swiftUI et iOs, j'essaie de créer un champ de saisie qui n'acceptera que des nombres

 TextField("Total number of people", text: $numOfPeople)

le TextField autorise également les caractères alphabétiques, comment puis-je limiter l'utilisateur à saisir uniquement des chiffres?

swiftuiswiftui-form
6
Lupyana Mbembati

Vous n'avez pas besoin d'utiliser Combine et onReceive, vous pouvez également utiliser ce code:

class Model: ObservableObject {
    @Published var text : String = ""
}

struct ContentView: View {

    @EnvironmentObject var model: Model

    var body: some View {
        TextField("enter a number ...", text: Binding(get: { self.model.text },
                                                      set: { self.model.text = $0.filter { "0123456789".contains($0) } }))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environmentObject(Model())
    }
}

Malheureusement, il y a aussi un petit scintillement, vous pouvez donc également voir les caractères non autorisés pendant très peu de temps (à mes yeux, un peu plus court que le chemin avec Combine)

0
Lupurus

Une autre approche consiste peut-être à créer une vue qui enveloppe la vue TextField et contient deux valeurs: une variable privée contenant la chaîne entrée et une valeur pouvant être liée qui contient l'équivalent Double. Chaque fois que l'utilisateur tape un caractère, il essaie de mettre à jour le Double.

Voici une implémentation de base:

struct NumberEntryField : View {
    @State private var enteredValue : String = ""
    @Binding var value : Double

    var body: some View {        
        return TextField("", text: $enteredValue)
            .onReceive(Just(enteredValue)) { typedValue in
                if let newValue = Double(typedValue) {
                    self.value = newValue
                }
        }.onAppear(perform:{self.enteredValue = "\(self.value)"})
    }
}

Vous pouvez l'utiliser comme ceci:

struct MyView : View {
    @State var doubleValue : Double = 1.56

    var body: some View {        
        return HStack {
             Text("Numeric field:")
             NumberEntryField(value: self.$doubleValue)   
            }
      }
}

Ceci est un exemple simple - vous voudrez peut-être ajouter des fonctionnalités pour afficher un avertissement pour une mauvaise entrée, et peut-être des contrôles de limites, etc.

0
Philip Pegden