SwiftUI中如何在ForEach内使用条件语句？

问题原因 #

你当前的代码报错主要有两个核心原因：

• 语法不支持：Swift不允许将多行if-else语句直接作为参数传入ForEach，ForEach需要接收一个表达式作为数据源，而非语句块。
• 类型不匹配：foodItems、drinkItems、dessers是三种不同类型的数组（分别对应FoodItems、DrinkItems、Desserts结构体），ForEach要求数据源必须是同一类型的集合，编译器无法自动推断出统一类型。

解决方案：统一类型 + 封装数据源逻辑 #

方法1：使用协议统一数据模型

通过定义协议让三个模型共享相同的属性接口，使数组类型统一，同时保留原结构体的独立性。

1. 修改Model代码，添加协议并让模型遵循：

import Foundation

// 定义统一协议，包含所需属性并遵循Identifiable
protocol FoodItem: Identifiable {
    var food: String { get }
    var image: String { get }
}

// 让三个结构体遵循协议
struct FoodItems: FoodItem {
    let food: String
    let image: String
    var id: String { food } // 用food作为唯一标识，也可改用UUID()
}

struct DrinkItems: FoodItem {
    let food: String
    let image: String
    var id: String { food }
}

struct Desserts: FoodItem {
    let food: String
    let image: String
    var id: String { food }
}

class Model: ObservableObject {
    // 统一数组类型为[FoodItem]
    let foodItems: [FoodItem] = [
        FoodItems(food: "Rice", image: "ricee"),
        FoodItems(food: "Fish Curry", image: "fishcurry"),
        FoodItems(food: "Fish Curry 2", image: "Fish Curry 2"),
        FoodItems(food: "Egg Curry", image: "eggcurry")
    ]

    let drinkItems: [FoodItem] = [
        DrinkItems(food: "Cola", image: "cola"),
        DrinkItems(food: "Pepsi", image: "pepsi"),
        DrinkItems(food: "Limca", image: "limca"),
    ]

    let dessers: [FoodItem] = [
        Desserts(food: "strawberry", image: "strawberry"),
        Desserts(food: "chocolate", image: "chocolate"),
    ]
}

2. 在View中封装数据源选择逻辑：

// 假设View中已有@ObservedObject var model: Model和@State var foodType: Int

// 计算属性：根据foodType返回对应数据源
private var currentFoodItems: [FoodItem] {
    switch foodType {
    case 1:
        return model.foodItems
    case 2:
        return model.drinkItems
    default:
        return model.dessers
    }
}

// 修改LazyVGrid代码
LazyVGrid(columns: columns, spacing: 20) {
    ForEach(currentFoodItems) { item in
        VStack {
            GridImageView(item.image)
            Text(item.food)
        }
    }
}
.padding(.horizontal)

方法2：用元组简化统一类型

如果不需要保留原结构体，可直接用元组统一数组类型，实现更简洁：

1. 修改Model代码：

class Model: ObservableObject {
    // 所有数组统一为[(food: String, image: String)]类型
    let foodItems = [
        (food: "Rice", image: "ricee"),
        (food: "Fish Curry", image: "fishcurry"),
        (food: "Fish Curry 2", image: "Fish Curry 2"),
        (food: "Egg Curry", image: "eggcurry")
    ]

    let drinkItems = [
        (food: "Cola", image: "cola"),
        (food: "Pepsi", image: "pepsi"),
        (food: "Limca", image: "limca"),
    ]

    let dessers = [
        (food: "strawberry", image: "strawberry"),
        (food: "chocolate", image: "chocolate"),
    ]
}

2. 在View中实现：

private var currentItems: [(food: String, image: String)] {
    switch foodType {
    case 1:
        return model.foodItems
    case 2:
        return model.drinkItems
    default:
        return model.dessers
    }
}

LazyVGrid(columns: columns, spacing: 20) {
    // 通过\.food作为唯一标识
    ForEach(currentItems, id: \.food) { item in
        VStack {
            GridImageView(item.image)
            Text(item.food)
        }
    }
}
.padding(.horizontal)

内容的提问来源于stack exchange，提问作者Alan Bosco