从选择器 SwiftUI 读取选择
Reading selection from picker SwiftUI
我正在创建一个选择器,其中从类型为 Product
的数组 productList
中选择食品,我正在尝试创建文本框来输出存储在任何产品中的每个变量被选中。然而,虽然代码构建成功,但选择器不允许用户进行选择。我该如何解决这个问题?
这是我的代码:
struct AddView : View {
@State var selectFood = 0
@ObservedObject var database : Database
var body: some View {
VStack{
Picker(selection: $selectFood, label: Text("What did you eat?")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white))
{
ForEach(database.productList) { (productList: Product) in
Text(productList.name)
}
}
.pickerStyle(MenuPickerStyle())
Spacer(minLength: 100)
ZStack {
Rectangle()
.frame(width: 350, height: 90, alignment: .center)
.foregroundColor(.white)
.opacity(0.25)
.offset(y: 40)
.cornerRadius(10)
Text("Calories: \(database.productList[selectFood].calories)")
}
Spacer()
Text("Enter")
Spacer()
}
.padding(.horizontal, 50)
}
}
这是存储数组的代码:
struct Product : Identifiable {
var id = UUID()
var name : String
var calories : Double
var protein : Double
var carbs : Double
var fats : Double
var weight : Double
}
class Database : ObservableObject{
@Published var productList = [Product]()
init() {
self.productList = [
Product(name: "Apple", calories: 52, protein: 0.3, carbs: 14, fats: 0.2, weight: 80),
Product(name: "Avocado", calories: 160, protein: 2, carbs: 9, fats: 15, weight: 600),
Product(name: "Banana", calories: 89, protein: 1.1, carbs: 23, fats: 0.3, weight: 120),
Product(name: "Broccoli", calories: 34, protein: 2.8, carbs: 5, fats: 0.4, weight: 225),
Product(name: "Burger", calories: 264, protein: 13, carbs: 30, fats: 10, weight: 110),
Product(name: "Carrot", calories: 41, protein: 0.9, carbs: 10, fats: 0.2, weight: 61),
Product(name: "Cheerios", calories: 379, protein: 6, carbs: 83, fats: 5, weight: 40),
Product(name: "Cherry", calories: 50, protein: 1, carbs: 12, fats: 0.3, weight: 5),
Product(name: "Chicken Nuggets", calories: 302, protein: 16, carbs: 15, fats: 20, weight: 16),
Product(name: "Cocoa Pops", calories: 389, protein: 5, carbs: 85, fats: 2.9, weight: 45),
Product(name: "Corn Flakes", calories: 357, protein: 8, carbs: 84, fats: 0.4, weight: 45),
Product(name: "Crunchy Nuts", calories: 402, protein: 6, carbs: 82, fats: 5, weight: 45),
Product(name: "Eggs", calories: 196, protein: 14, carbs: 0.8, fats: 15, weight: 60),
Product(name: "Fries", calories: 312, protein: 3.4, carbs: 43, fats: 15, weight: 100),
Product(name: "Froasted Flakes", calories: 369, protein: 4, carbs: 89, fats: 1.7, weight: 45),
]
}
}
选择的类型应该与Picker数据块id或标签的类型相同,所以如果你想要选择索引,那么它应该像
struct AddView : View {
@State var selectFood = 0
@ObservedObject var database : Database
var body: some View {
VStack{
Picker(selection: $selectFood, label: Text("What did you eat?")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white))
{
ForEach(database.productList.indices, id: \.self) { i in // << here
Text(database.productList[i].name) // << and here
}
}
.pickerStyle(MenuPickerStyle())
// ... other code
我正在创建一个选择器,其中从类型为 Product
的数组 productList
中选择食品,我正在尝试创建文本框来输出存储在任何产品中的每个变量被选中。然而,虽然代码构建成功,但选择器不允许用户进行选择。我该如何解决这个问题?
这是我的代码:
struct AddView : View {
@State var selectFood = 0
@ObservedObject var database : Database
var body: some View {
VStack{
Picker(selection: $selectFood, label: Text("What did you eat?")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white))
{
ForEach(database.productList) { (productList: Product) in
Text(productList.name)
}
}
.pickerStyle(MenuPickerStyle())
Spacer(minLength: 100)
ZStack {
Rectangle()
.frame(width: 350, height: 90, alignment: .center)
.foregroundColor(.white)
.opacity(0.25)
.offset(y: 40)
.cornerRadius(10)
Text("Calories: \(database.productList[selectFood].calories)")
}
Spacer()
Text("Enter")
Spacer()
}
.padding(.horizontal, 50)
}
}
这是存储数组的代码:
struct Product : Identifiable {
var id = UUID()
var name : String
var calories : Double
var protein : Double
var carbs : Double
var fats : Double
var weight : Double
}
class Database : ObservableObject{
@Published var productList = [Product]()
init() {
self.productList = [
Product(name: "Apple", calories: 52, protein: 0.3, carbs: 14, fats: 0.2, weight: 80),
Product(name: "Avocado", calories: 160, protein: 2, carbs: 9, fats: 15, weight: 600),
Product(name: "Banana", calories: 89, protein: 1.1, carbs: 23, fats: 0.3, weight: 120),
Product(name: "Broccoli", calories: 34, protein: 2.8, carbs: 5, fats: 0.4, weight: 225),
Product(name: "Burger", calories: 264, protein: 13, carbs: 30, fats: 10, weight: 110),
Product(name: "Carrot", calories: 41, protein: 0.9, carbs: 10, fats: 0.2, weight: 61),
Product(name: "Cheerios", calories: 379, protein: 6, carbs: 83, fats: 5, weight: 40),
Product(name: "Cherry", calories: 50, protein: 1, carbs: 12, fats: 0.3, weight: 5),
Product(name: "Chicken Nuggets", calories: 302, protein: 16, carbs: 15, fats: 20, weight: 16),
Product(name: "Cocoa Pops", calories: 389, protein: 5, carbs: 85, fats: 2.9, weight: 45),
Product(name: "Corn Flakes", calories: 357, protein: 8, carbs: 84, fats: 0.4, weight: 45),
Product(name: "Crunchy Nuts", calories: 402, protein: 6, carbs: 82, fats: 5, weight: 45),
Product(name: "Eggs", calories: 196, protein: 14, carbs: 0.8, fats: 15, weight: 60),
Product(name: "Fries", calories: 312, protein: 3.4, carbs: 43, fats: 15, weight: 100),
Product(name: "Froasted Flakes", calories: 369, protein: 4, carbs: 89, fats: 1.7, weight: 45),
]
}
}
选择的类型应该与Picker数据块id或标签的类型相同,所以如果你想要选择索引,那么它应该像
struct AddView : View {
@State var selectFood = 0
@ObservedObject var database : Database
var body: some View {
VStack{
Picker(selection: $selectFood, label: Text("What did you eat?")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white))
{
ForEach(database.productList.indices, id: \.self) { i in // << here
Text(database.productList[i].name) // << and here
}
}
.pickerStyle(MenuPickerStyle())
// ... other code