无法将值从一个视图传递到另一个视图（SwiftUI）

Question

我想在 textField 中输入 2 个数字，并在第三个视图（ResultView）中打印这两个数字的乘积。

我有 3 个观点：-

a - ContentView（此视图包含导航目的地）

struct ContentView: View {
    @State private var path = NavigationPath()

        var body: some View {
            NavigationStack(path: $path) {

            Button {
              path.append("EnterNumberView")
                  } label: {
                      Text("Multiply")
                }
                .navigationDestination(for: String.self) { string in
                    switch string {
                    case "EnterNumberView":
                        EnterNumberView(path: $path)
                    case "ResultView":
                        ResultView()
                    default:
                        Text("Unknown")
                    }
                }
            }
        }
    }

b - EnterNumberView（输入两个数字）

struct EnterNumberView: View {
    @Binding var path: NavigationPath
    @State var input1: String = ""
    @State var input2: String = ""

        var calculation: String {
            //check if both fields have text else no need for message
            guard input1.isEmpty == false, input2.isEmpty == false else { return "" }

            //check if both are numbers else we need to print "Error"
            guard let m = Double(input1), let n  = Double(input2) else { return "Error" }

            let product = m * n
            return String(format: "%.2f", product)
        }

    var body: some View {
        VStack {
            TextField("Enter First Number", text: $input1)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField("Enter Second Number", text: $input2)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
            Button {
                path.append("ResultView")
            } label: {
                Text("Tap to see result")
            }

        }
    }
    
}

c - ResultView（我想在这里打印结果）

struct ResultView: View {
    var body: some View {
     Text("Your result is \(calculation)") //Cannot find calculation in scope 
    }
}

Answer 1

你在这里有两种可能性：

• 在ContentView中创建结果 var，并像传递path一样传递它。

• 或者创建一个包含 State 的ObservableObject ，它会一直传递到环境中。

此示例显示了使用Viewmodel的可能实现：

class Viewmodel: ObservableObject{
    // these published values hold the state of your application
    // and notify the view to refresh if something changed
    @Published var input1: String = ""
    @Published var input2: String = ""
    @Published var result: String = ""
    
    func calculation() {
        //check if both fields have text else no need for message
        guard input1.isEmpty == false, input2.isEmpty == false else { return }
        
        //check if both are numbers else we need to print "Error"
        guard let m = Double(input1), let n  = Double(input2) else { return }
        
        let product = m * n
        result = String(format: "%.2f", product)
    }
}

struct ContentView: View {
    @State private var path = NavigationPath()
    // create the viewmodel here
    @StateObject private var viewmodel = Viewmodel()
    var body: some View {
        NavigationStack(path: $path) {
            
            Button {
                path.append("EnterNumberView")
            } label: {
                Text("Multiply")
            }
            .navigationDestination(for: String.self) { string in
                switch string {
                case "EnterNumberView":
                    EnterNumberView(path: $path)
                    // add the viewmodel to the environment
                        .environmentObject(viewmodel)
                case "ResultView":
                    ResultView()
                    // add the viewmodel to the environment
                        .environmentObject(viewmodel)
                default:
                    Text("Unknown")
                }
            }
        }
    }
}

struct EnterNumberView: View {
    @Binding var path: NavigationPath
    // pull the viewmodel from the environment
    @EnvironmentObject private var viewmodel: Viewmodel
    
    var body: some View {
        VStack {
            // reference the viewmodel input1 here
            TextField("Enter First Number", text: $viewmodel.input1)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField("Enter Second Number", text: $viewmodel.input2)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            // navigation
            Button {
                path.append("ResultView")
            } label: {
                Text("Tap to see result")
            }
        }
    }
}

struct ResultView: View {
    // pull the viewmodel from the environment
    @EnvironmentObject private var viewmodel: Viewmodel
    var body: some View {
        // reference the result from the viewmodel
        Text("Your result is \(viewmodel.result)")
            .onAppear{
                // perform calculation
                viewmodel.calculation()
            }
    }
}