不能选择Picker

Question

我试图在SwiftUI中建立一个库存控制系统，用户可以添加一个成分，然后添加一个量，然后选择一个度量单位(kg，g，l，ml)。

该应用程序允许他们点击一个按钮，该按钮允许他们将一个成分添加到一个文本框中，该文本框被创建，然后他们的输入被添加到列表中。

我很难允许用户在配料文本框旁边的文本框中键入一个数字，并使选择器可点击。

这是我的密码

import SwiftUI
struct UploadView2: View {
    
    @State var ingredients = [String]()
    @State var amount = [String]()
    @State var choices = ["g", "kg", "ml", "l"]
    @State var choosen: String = ""
    
    @EnvironmentObject var viewRouter: ViewRouter
    
    func getBinding(forIndex index: Int) -> Binding<String> {
        return Binding<String>(get: { ingredients[index] },
                               set: { ingredients[index] = $0 })
    }
    
    var body: some View {
        VStack{
            HStack{
                Button {
                    print("Going Back")
                    viewRouter.currentPage = .UploadView
                } label: {
                    Image(systemName: "arrow.left")
                        .font(.system(size: 30))
                        .foregroundColor(.black)
                }
                .padding(.horizontal)
                Spacer()
                Text("Add Ingredients")
                    .font(.system(size: 30))
                    .fontWeight(.bold)
                Spacer()
                Button {
                    print("Saved")
                } label: {
                    Image(systemName: "bookmark")
                        .font(.system(size: 30))
                        .foregroundColor(.black)
                }
                .padding()
            }
            Form {
                ForEach(0..<ingredients.count, id: \.self) { index in
                    HStack {
                        Button(action: { ingredients.remove(at: index) }) {
                            Image(systemName: "minus.circle.fill")
                                .foregroundColor(.red)
                                .padding(.horizontal)
                        }
                        TextField("Ingredient", text: getBinding(forIndex: index))

                            Picker("", selection: $choosen){
                                ForEach(choices, id: \.self) { i in
                                    Text("\(i)").tag(i)
                                }
                            }
                        
                    }
                }
                Button(action: { ingredients.append("") }) {
                    HStack {
                        Image(systemName: "plus")
                            .foregroundColor(.black)
                            .padding(.horizontal)
                        Text("add an ingredient")
                            .foregroundColor(.black)
                    }
                    
                }
            }
            Button {
                //change view router
                //add data to data class
               
                viewRouter.currentPage = .UploadView3
            } label: {
                Label("next", systemImage: "arrow.right")
            }
            
            .padding()
            .frame(width: 100)
            .foregroundColor(Color.white)
            .background(Color.red)
            .cornerRadius(8)
        }
        
    }
}


struct UploadView2_Previews: PreviewProvider {
    static var previews: some View {
        UploadView2()
            .previewDevice(PreviewDevice(rawValue: "iPhone 13"))
            .previewInterfaceOrientation(.portrait)
        UploadView2()
            .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
    }
}

当我点击我的点击时，它会移除文本框，就像取消按钮一样。

我的总体目标是有一个文本框输入一个成分，然后一个文本框输入一个量，然后一个选择器选择一个度量单位。

如何尽可能多地使用当前代码来实现这一点？

Answer 1

为了能够“选择”您的选择器，您可以尝试这种方法，如下面的示例代码所示：

struct ContentView: View {
    @State var ingredient = ""
    @State var amount = ""
    @State var choosen = ""
    @State var choices = ["g", "kg", "ml", "l"]
    
    var body: some View {
        HStack {
            TextField("Ingredient", text: $ingredient) // <-- or your getBinding thing
            TextField("Amount", text: $amount)
            Picker("", selection: $choosen){
                ForEach(choices, id: \.self) { i in
                    Text("\(i)").tag(i)
                }
            }
            .pickerStyle(.inline)
            .frame(width: 55)
            .clipped() // <-- here
        }
    }
}