如何在swiftui中为foreach循环的每个项目显示不同的视图

Question

我想为不同的血型显示不同的视图。

let categories = ["A+", "B+", "AB+", "O+", "A-", "B-", "AB-", "O-"]
let onSelectedCategory: (String) -> ()
@State private var selectedCategory: String = ""
var body: some View {
ScrollView(.horizontal) {

HStack {
ForEach(categories, id: .self) { category in
Button(action: {
selectedCategory = category
onSelectedCategory(category)
//Here I want to go different view for each blood group, 
//like APositiveView(), BPositiveView... 
}, label: {
Text(category)
}).padding(10)
.foregroundColor(selectedCategory == category ? Color.white: Color(#colorLiteral(red: 0.204610765, green: 0.2861392498, blue: 0.3685011268, alpha: 1)))
.background(selectedCategory == category ? Color(#colorLiteral(red: 0.4982050061, green: 0.5490344763, blue: 0.5528618097, alpha: 1)): Color(#colorLiteral(red: 0.9254772663, green: 0.9412199855, blue: 0.9449794888, alpha: 1)))
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: /*@START_MENU_TOKEN@*/.continuous/*@END_MENU_TOKEN@*/))
}

}
}
//.ignoresSafeArea()
}

在选择任何血型后，它应该为每个不同的血型显示不同的视图，如APpositiveView((、BPpositiveview((

Answer 1

在HStack中使用if语句，根据selectedCategory:的值显示正确的视图

HStack {
if selectedCategory == "A+" {
APositiveView()
} else if selectedCategory == "B+" {
BPositiveView()
} else if ...
ForEach(categories, id: .self) { category in
// ...
}   
}

尽管更好的方法是使用一个显示此类分类信息的单一视图：

struct CategoryView: View {
@Binding var category: String
var body: some View {
// Display based on the value of category
}
}
HStack {
CategoryView(category: $selectedCategory)
ForEach(categories, id: .self) { category in
// ...
}
}