Schnelle Benutzeroberfläche So erstellen Sie TextField, das nur Zahlen akzeptiert

Ich bin neu in SwiftUI und iOS und versuche, ein Eingabefeld zu erstellen, das nur Zahlen akzeptiert

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

Das TextField erlaubt auch alphabetische Zeichen. Wie beschränke ich den Benutzer darauf, nur Zahlen einzugeben?

Sie können den Tastaturtyp so einstellen, dass die Art der Tastatur eingeschränkt TextFieldwird.

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

Die Dokumentation von Apple finden Sie hier. Eine Liste aller unterstützten Tastaturtypen finden Sie hier .

Hinweis: Dies funktioniert auf einem iPad nicht, da für das iPad kein Nummernblock vorhanden ist. Für eine bessere Lösung überprüfen Sie die Lösung von John M unter https://stackoverflow.com/a/58736068/5508175

Das Anzeigen eines Nummernblocks ist zwar ein guter erster Schritt, verhindert jedoch nicht die Eingabe fehlerhafter Daten:

1. Der Benutzer kann nicht numerischen Text in das Textfeld einfügen
2. iPad-Benutzer erhalten weiterhin eine vollständige Tastatur
3. Jeder mit angeschlossener Bluetooth-Tastatur kann alles eingeben

Was Sie wirklich tun möchten, ist die Eingabe wie folgt zu bereinigen:

import SwiftUI
import Combine

struct StackOverflowTests: View {
    @State private var numOfPeople = "0"

    var body: some View {
        TextField("Total number of people", text: $numOfPeople)
            .keyboardType(.numberPad)
            .onReceive(Just(numOfPeople)) { newValue in
                let filtered = newValue.filter { "0123456789".contains($0) }
                if filtered != newValue {
                    self.numOfPeople = filtered
                }
        }
    }
}

Bei jeder numOfPeopleÄnderung werden die nicht numerischen Werte herausgefiltert und der gefilterte Wert verglichen, um festzustellen, ob er numOfPeopleein zweites Mal aktualisiert werden sollte, wobei die fehlerhafte Eingabe mit der gefilterten Eingabe überschrieben wird.

Beachten Sie, dass der JustHerausgeber dies von Ihnen verlangt import Combine.

BEARBEITEN:

Beachten Sie zur Erläuterung des JustHerausgebers den folgenden konzeptionellen Überblick darüber, was passiert, wenn Sie den Wert in ändern TextField:

1. Da TextFielda Bindingbis a benötigt String, werden beim Ändern des Feldinhalts auch diese Änderungen in die @StateVariable zurückgeschrieben.
2. Wenn sich eine markierte Variable @Stateändert, berechnet SwiftUI die bodyEigenschaft der Ansicht neu.
3. Während der bodyBerechnung wird ein JustHerausgeber erstellt. Combine hat viele verschiedene Publisher, die im Laufe der Zeit Werte ausgeben, aber der JustPublisher nimmt "nur" einen einzelnen Wert (den neuen Wert von numberOfPeople) und gibt ihn auf Anfrage aus.
4. Die onReceiveMethode macht einen ViewAbonnenten zu einem Herausgeber, in diesem Fall zu dem Justgerade erstellten Herausgeber. Nach dem Abonnieren werden sofort alle verfügbaren Werte vom Herausgeber abgefragt, von denen es nur einen gibt, den neuen Wert von numberOfPeople.
5. Wenn der onReceiveTeilnehmer einen Wert erhält, führt er den angegebenen Abschluss aus. Unsere Schließung kann auf zwei Arten enden. Wenn der Text bereits nur numerisch ist, tut er nichts. Wenn der gefilterte Text unterschiedlich ist, wird er in die @StateVariable geschrieben, wodurch die Schleife erneut beginnt. Diesmal wird der Abschluss jedoch ausgeführt, ohne dass Eigenschaften geändert werden.

Weitere Informationen finden Sie unter Verwenden von Kombinieren .

Sie müssen nicht verwenden Combineund onReceivekönnen auch diesen Code verwenden:

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())
    }
}

Leider gibt es auch ein kleines Flackern, so dass Sie auch die nicht erlaubten Zeichen für eine sehr kurze Zeit sehen können (in meinen Augen etwas kürzer als der Weg mit Combine)

Ein anderer Ansatz besteht möglicherweise darin, eine Ansicht zu erstellen, die die TextField-Ansicht umschließt und zwei Werte enthält: eine private Variable, die den eingegebenen String enthält, und einen bindbaren Wert, der das Double-Äquivalent enthält. Jedes Mal, wenn der Benutzer ein Zeichen eingibt, versucht er, das Double zu aktualisieren.

Hier ist eine grundlegende Implementierung:

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)"})
    }
}

Sie könnten es so verwenden:

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

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

Dies ist ein einfaches Beispiel. Möglicherweise möchten Sie Funktionen hinzufügen, um eine Warnung für schlechte Eingaben anzuzeigen und möglicherweise Überprüfungen usw. zu begrenzen.