SwiftUI稀释计算器如何实现点击Go按钮后触发计算

实时更新结果的核心原因是原代码结果区域直接绑定了跟随输入状态自动刷新的计算属性，只要把计算触发时机移到Go按钮点击事件，用独立状态变量存储最终展示结果即可，具体修改步骤：

• 删除原代码中两个自动计算的计算属性totalProductAmount、totalWaterAmount，直接使用你已经声明的@State private var TotalProduct = 0.0和@State private var TotalWater = 0.0两个状态变量存储最终展示的计算结果，这类状态变量只有主动赋值时才会更新UI，不会随用户输入实时变化。
• 给Go按钮的action闭包添加计算逻辑，用户点击按钮时再读取ContainerSize、DilutionRatio的输入值完成计算，把结果赋值给TotalProduct和TotalWater。注意：你原来的总需水量计算逻辑有误，正确逻辑应为容器总容量减去总产品用量，修正代码里已经做了调整。
• 修改结果区域的Text组件，直接读取TotalProduct、TotalWater的值展示即可。
• 原代码声明的@State private var Go = ""没有实际作用，可以直接删除；另外原代码里键盘工具栏的闭包存在语法缺失，修正代码里一并补全了。

// 状态变量保留，移除无用的Go声明
@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   

// 移除原有的两个实时计算属性，计算逻辑移到按钮点击事件中
       
//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: {
    // 点击后自动收起键盘
    amountIsFocused = false
    // 执行计算逻辑
    let container = Double(ContainerSize)
    let ratioUnit = Double(DilutionRatio + 1)
    TotalProduct = container / ratioUnit
    TotalWater = container - TotalProduct
}, label: {
    Image("Go Button")
})

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

    ZStack {
        Image("Total Water (Oz)")
        Text("\(TotalWater, specifier: "%.1f")")
            .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()
    }
}

可选优化：如果不想让用户进入页面就看到0.0的默认结果，可以新增一个@State private var showResult = false状态变量，点击Go按钮时将其设为true，用if showResult包裹结果区域，只有计算完成后才展示结果块即可。

内容的提问来源于stack exchange，提问作者fredos86