Calculator Functionality Help.

Hi,

I’m working on a dilution calculator. I have it 98% working, however, I want it to work a certain way and I’m not sure to do that. This is my first app so I’m new at this. 

So I want the user to be able to input the numbers and hit a button to get the calculation. I’ve been using @State and through my research and understanding, using that instantly updates any changes the user makes. 

So how do I go about making the app wait till the user hits the “Go” button. 

Hers my code so far. 

@State private var ContainerSize = 0
@State private var DilutionRatio = 0
@State private var Go = ""
@State private var TotalProduct = 0.0
@State private var TotalWater = 0.0

@FocusState private var amountIsFocused: Bool   

    var totalProductAmount: Double {       

        let firstValue = Double(ContainerSize)
        let secondValue = Double(DilutionRatio + 1)

        let totalProduct = Double(firstValue / secondValue)

    return totalProduct

    }

    var totalWaterAmount: Double {

        let firstValue = Double(ContainerSize)
        let secondValue = Double(DilutionRatio + 1)

        let totalWater = Double(firstValue - secondValue)

    return totalWater

    }
       
 //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))
                        .keyboardType(.decimalPad)
                        .focused($amountIsFocused)
                }
            }

//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))
                    .keyboardType(.decimalPad)
                    .focused($amountIsFocused)
            }

//Go Button

            Button(action: {}, label: {
                Image("Go Button")
            })

//Results

            HStack{            
                ZStack {
                    Image("Total Product (Oz)")
                    Text("\(totalProductAmount, specifier: "%.1f")")
                        .font(Font.system(size: 60, design: .default))
                }               

                ZStack {
                    Image("Total Water (Oz)")
                    Text(totalWaterAmount, format: .number)
                        .font(Font.system(size: 60, design: .default))
                }
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer(
                        Button("Done") {
                            amountIsFocused = false
    }

}

struct CalculatorIView_Previews: PreviewProvider {
    static var previews: some View {
        CalculatorIView()
}

}

The calculator works as is but I want the user to input numbers, hit the “Go” button, and the results are shown.