SwiftUI TextField Number Input - swift

Question

I'm trying to have the user input two numbers and then have those numbers be displayed and also added together. At the moment in order for the state variable to be updated you have the press return. Is there a way to have the state update like it does with text? I also have had the code inputed as a string but haven't been able to convert that to int so the numbers can be added together correctly. If anyone knows how to have it convert properly I would appreciate all the help I can get.
struct ContentView: View {
#State private var numOne: Int = 0
#State private var numTwo: Int = 0
var body: some View {
NavigationView {
VStack {
Form {
Section {
TextField("Number One", value: $numOne, formatter: NumberFormatter())
.keyboardType(.numberPad)
TextField("Number Two", value: $numTwo, formatter: NumberFormatter())
.keyboardType(.numberPad)
}
NavigationLink(
destination: addedView(numOne: $numOne, numTwo: $numTwo),
label: {
Text("Navigate")
}
)
}
}
}
}
}
struct addedView: View {
#Binding var numOne: Int
#Binding var numTwo: Int
#State private var added: Int = 0
var body: some View {
VStack {
Text("\(numOne)")
Text("\(numTwo)")
}
}
}

Answer 1

This shows how to enforce the TextFields be integers, and how to add them together for a result.
The main difference is that the formatter's numberStyle is .decimal. This means you will only get whole numbers / integers.
The result is added while they are Ints, so the numbers are added. If you add when they are both Strings, they will concatenate together. E.g. you want 5 + 10 to be 15, not 510.
You can then pass the result to a child view or NavigationLink if you wish.
struct ContentView: View {
#State private var numOne: Int = 0
#State private var numTwo: Int = 0
private static let formatter: NumberFormatter = {
let formatter = NumberFormatter()
formatter.numberStyle = .decimal
return formatter
}()
private var result: Int {
numOne + numTwo
}
var body: some View {
NavigationView {
VStack {
Form {
Section {
TextField("Number One", value: $numOne, formatter: Self.formatter)
.keyboardType(.numberPad)
TextField("Number Two", value: $numTwo, formatter: Self.formatter)
.keyboardType(.numberPad)
}
Section {
Text("Result: \(result)")
}
}
}
}
}
}
Note that the NumberFormatter is created statically, and only once. This is because it is quite expensive to create them, especially twice every render.

Answer 2

This uses Combine to make sure that the text entered is a digit, and then changes it to an Int to use in computations. The return value is a closure that you can use to
struct EditableInt : View {
var intString: String = ""
var onChanged: (Int) -> Void
init(_ int: Int?, onChanged: #escaping (Int) -> Void) {
if let int = int,
let formattedInt = Formatter.numberFormatter.string(from: int as NSNumber){
self.intString = formattedInt
} else {
intString = ""
}
self.onChanged = onChanged
}
#State private var editableInt: String = ""
var body: some View {
TextField(" " + intString + " ", text: $editableInt)
.onReceive(Just(editableInt)) { newValue in
let editableInt = newValue.filter { "0123456789".contains($0) }
if editableInt != intString {
if let returnInt = Int(editableInt) {
onChanged(returnInt)
}
}
}
.onAppear { self.editableInt = self.intString }
}
}
The above is reusable, and is called from another view like this:
struct OtherView: View {
#State var otherViewInt = 0
var body: some View {
EditableInt(otherViewInt) { newInt in
otherViewInt = newInt
}
}
}