Remove Text Over a Placeholder in SwiftUI - swiftui

Question

I have a dilution calculator that works with no issues. However, there is always a "0" over the placeholder in the textfield for Container Size and Dilution Ratio. I don't mind the "0", I actually want a "0" there. But I have to erase it every time I tap on the textfield to input a number. Even if I remove the placeholder it's still there. How do I make it so that I don't have to keep erasing the "0" every time I want to input a number but keep the placeholder.
struct CalculatorView: View {
#State private var containerSize = 0
#State private var dilutionRatio = 0
#State private var totalProduct = 0.0
#State private var totalWater = 0.0
#FocusState private var amountIsFocused: Bool
#FocusState private var focusedInput: Field?
func totalProductAmount() -> Double {
let firstValue = Double(containerSize)
let secondValue = Double(dilutionRatio + 1)
let totalProduct = Double(firstValue / secondValue)
return totalProduct
}
func totalWaterAmount() -> Double {
let firstValue = Double(containerSize)
let secondValue = Double(dilutionRatio + 1)
let totalProduct = Double(firstValue / secondValue)
let totalWater = Double(firstValue - totalProduct)
return totalWater
}
var body: some View {
NavigationView {
VStack(alignment: .center) {
Image("Logo")
.padding(.horizontal, 30)
HStack {
//Container Size
ZStack {
Image("Container Size (Oz)")
.padding(.vertical, -15)
TextField("", value: $containerSize, format: .number)
.frame(width: 200.0, height: 60.0)
.multilineTextAlignment(.center)
.font(Font.system(size: 50, design: .default))
.foregroundColor(.white)
.keyboardType(.decimalPad)
.focused($amountIsFocused)
.focused($focusedInput, equals: .containerSize)
}
}
//Dilution Ratio
ZStack {
Image("Dilution Ratio - 2")
.padding(.vertical, -10)
TextField("", value: $dilutionRatio, format: .number)
.frame(width: 200.0, height: 60.0)
.multilineTextAlignment(.center)
.font(Font.system(size: 50, design: .default))
.foregroundColor(.white)
.keyboardType(.decimalPad)
.focused($amountIsFocused)
.focused($focusedInput, equals: .dilutionRatio)
}
//Go Button
Button(action: {
totalProduct = totalProductAmount()
totalWater = totalWaterAmount()
amountIsFocused = false
}, label: {
Image("Go Button")
})
//Results
HStack{
ZStack {
Image("Total Product (Oz)")
Text("\(totalProduct, specifier: "%.1f")")
.font(Font.system(size: 60, design: .default))
.foregroundColor(.white)
}
ZStack {
Image("Total Water (Oz)")
Text("\(totalWater, specifier: "%.1f")")
.font(Font.system(size: 60, design: .default))
.foregroundColor(.white)
}

Answer 1

Make containerSize and dilutionRatio an optional Int with no default value.
#State private var containerSize: Int?
#State private var dilutionRatio: Int?
TextField("0", value: $containerSize ?? "", format: .number)