我正在实现一个需要一个非常常见场景的应用程序:将选择器的值作为文本字段的输入。选择器屏幕右上角的“完成”按钮可以将值保存到文本字段。我使用的是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)
}
在上面的代码中,基本上当用户试图点击 TextField 时,我会弹出一个“浮动”选择器让我选择值。但是,文本字段中的值不会根据选择器而改变。