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

Question

我正在实现一个应用程序，它需要一个非常常见的场景：将选择器的值作为文本字段的输入。在选择器屏幕的右上角有一个“完成”按钮，可以将值保存到文本字段。我正在使用 SwiftUI 而不是 UIKit。我看到了一堆 UIKit 解决方案，但其中 none 仅使用 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)
    }

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

Answer 1

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

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

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

How to set up a textfield with Picker as input in SwiftUI

swift

swiftui

swiftui-picker