如何在 SwiftUI 中使用 Picker 作为输入设置文本字段

Question

我正在实现一个需要一个非常常见场景的应用程序：将选择器的值作为文本字段的输入。 选择器屏幕右上角的“完成”按钮可以将值保存到文本字段。 我正在使用SwiftUI而不是 UIKit。 我看到一堆 UIKit 解决方案，但没有一个只使用 SwiftUI。 有没有办法在纯swiftUI 中实现这个 function ？

struct AddFoodView: View{
    @State private var name = ""
    @State private var count : String = "1"
    @State private var category : String = "肉类";
    @State var showCategory = false
    @State var showCount = false
    

    var body: some View{
        ZStack{
            NavigationView{
                List{
                    HStack{
                        Text("食品")
                        TextField("请输入材料名", text: $name);
                    }.padding()
                    HStack{
                        Text("数量")
                        TextField("请选择数量",text:$count,onEditingChanged:{(changed) in
                            self.showCount=changed;
                        }){}
                    }.padding()
                    HStack{
                        Text("种类")
                        TextField("请选择种类",text: $category,onEditingChanged:{(changed) in
                            self.showCategory=changed;
                        }){}
                    }.padding()
                }
            }.navigationBarItems(trailing: NavigationLink(destination: FoodView()){
                Text("保存").foregroundColor(Color.blue).font(.system(size: 18,design: .default))
            })
            
            if self.showCount{
                    ZStack{
                        Rectangle().fill(Color.gray)
                            .opacity(0.5)
                        VStack(){
                            Spacer(minLength: 0);
                            HStack{
                                Spacer()
                                Button(action: {
                                    self.showCount=false;
                                }, label: {
                                    Text("Done")
                                }).frame(alignment: .trailing).offset(x:-15,y:15)
                            }
                            Picker(selection: $count,label: EmptyView()) {
                                ForEach(1..<100){ number in
                                    Text("\(number)")
                                }
                            }.labelsHidden()
                        }            .frame(minWidth: 300, idealWidth: 300, maxWidth: 300, minHeight: 250, idealHeight: 100, maxHeight: 250, alignment: .top).fixedSize(horizontal: true, vertical: true)
                        .background(RoundedRectangle(cornerRadius: 27).fill(Color.white.opacity(1)))
                        .overlay(RoundedRectangle(cornerRadius: 27).stroke(Color.black, lineWidth: 1))
                        Spacer()
                }
            }
           if self.showCategory{
                let categoryArr = ["肉类","蔬菜类","饮料类","调味品类"]
                    ZStack{
                        Rectangle().fill(Color.gray)
                            .opacity(0.5)
                        VStack(){
                            Spacer(minLength: 0);
                            HStack{
                                Spacer()
                                Button(action: {
                                    self.showCategory=false;
                                }, label: {
                                    Text("Done")
                                }).frame(alignment: .trailing).offset(x:-15,y:15)
                            }
                                Picker(selection: $category,label: EmptyView()) {
                                    ForEach(0..<categoryArr.count){ number in
                                        Text(categoryArr[number]).tag(categoryArr[number])
                                    }
                                }.labelsHidden()
                        }            .frame(minWidth: 300, idealWidth: 300, maxWidth: 300, minHeight: 250, idealHeight: 100, maxHeight: 250, alignment: .top).fixedSize(horizontal: true, vertical: true)
                        .background(RoundedRectangle(cornerRadius: 27).fill(Color.white.opacity(1)))
                        .overlay(RoundedRectangle(cornerRadius: 27).stroke(Color.black, lineWidth: 1))
                        Spacer()
                    }
            }
        }.animation(.easeInOut)
    }
        

在上面的代码中，基本上当用户试图点击 TextField 时，我会弹出一个“浮动”选择器让我选择值。 但是，文本字段中的值不会根据选择器而改变。

Answer 1

据我了解您的代码，问题是由于Picker中的选择（count is-a String ）和项目（item is-a Int ）类型不对齐，所以这是一个修复（使用与选择相同类型的标签） ：

Picker(selection: $count,label: EmptyView()) {
    ForEach(1..<100){ number in
        Text("\(number)").tag("\(number)")  // << here !!
    }
}