如何在SwiftUI中设置一个带有Picker作为输入的文本框

Question

我正在实现一个应用程序，需要一个非常常见的场景：将选择器的值作为输入传递给Textfield。在选择器屏幕右上角有一个“完成”按钮，可以将值保存到textfield中。我正在使用SwiftUI而不是UIKit。我看到了一堆UIKit的解决方案，但是没有一个仅使用SwiftUI。是否有一种方法可以在纯SwiftUI中实现此功能？

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)
    }
        

在上述代码中，当用户尝试点击文本框时，我会弹出一个“浮动”选择器，让我选择值。然而，文本字段中的值不会随着选择器的更改而改变。

- TommySun

Answer 1

据我理解，您的代码问题是由于选择（计数是一个字符串）和选项（项目是一个整数）在Picker中类型不对齐所致，因此这里有一个修复方法（使用与选择相同类型的标签）：

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

- Asperi

---

谢谢，我尝试了一下，它起作用了。然而，你提到的原因有点让我困惑。我重新上传了整个代码，其中包含另一个代码块，在其中我使用String来进行选择和项目。但它仍然没有起作用。然而，如果我将其中一行更改为Text(categoryArr[number]).tag(categoryArr[number])，那么它又可以工作了。 - TommySun