使用CoreDataViewModel时如何在Canvas中预览Core Data对象

这不是最优方案，你完全不需要重复编写列表相关代码，只要调整视图模型的初始化逻辑，直接复用现有CarsView的布局即可实现预览效果，修改步骤如下：

第一步：调整CoreDataViewModel初始化逻辑 #

给视图模型新增可选的管理器入参，默认使用正式环境的CoreData单例，预览时可以传入模拟内存数据源的管理器：

class CoreDataViewModel: ObservableObject{
    let manager: CoreDataManager
    @Published var cars: [Car] = []
    
    // 新增可自定义manager的初始化方法
    init(manager: CoreDataManager = .instance){
        self.manager = manager
        getCars()
    }
    
    // 原有getCars、save、增删改方法保持不变
}

第二步：补全预览用的模拟数据（可选） #

在CoreDataManager的preview静态变量中可以批量添加测试车辆，满足多数据预览需求：

static var preview: CoreDataManager = {
    let result = CoreDataManager(inMemory: true)
    let viewContext = result.container.viewContext
    // 批量创建测试车辆
    let sampleCars = [
        ("Ford", "Mustang"),
        ("Tesla", "Model 3"),
        ("BMW", "X5"),
        ("Toyota", "Camry")
    ]
    sampleCars.forEach { make, model in
        let car = Car(context: viewContext)
        car.make = make
        car.model = model
    }
    do {
        try viewContext.save()
    } catch {
        print("预览数据保存失败：\(error.localizedDescription)")
    }
    return result
}()

第三步：简化CarsView预览代码 #

直接传入使用预览管理器的视图模型即可，不需要重复编写List、ForEach相关布局：

struct CarsView_Previews: PreviewProvider {
    static var previews: some View {
        CarsView(coreDataViewModel: CoreDataViewModel(manager: CoreDataManager.preview))
    }
}

可选优化：抽取列表行组件 #

如果自定义行代码逻辑复杂，可以单独抽取为CarRowView组件，既可以简化CarsView的代码，也支持单独预览行样式：

// 独立的车辆行组件
struct CarRowView: View {
    let car: Car
    var body: some View {
        // 原有ForEach内的自定义行代码全部挪到此处
        VStack(alignment: .leading, spacing: 4) {
            Text(car.make ?? "未知品牌")
                .font(.headline)
            Text(car.model ?? "未知型号")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
    }
}

// 行组件单独预览
struct CarRowView_Previews: PreviewProvider {
    static var previews: some View {
        let testCar = try! CoreDataManager.preview.container.viewContext.fetch(Car.fetchRequest()).first!
        CarRowView(car: testCar)
            .previewLayout(.sizeThatFits)
    }
}

// 修改后CarsView的代码
struct CarsView: View {
    @ObservedObject var coreDataViewModel:CoreDataViewModel
    var body: some View {
        List {
            ForEach(coreDataViewModel.cars) { car in
                CarRowView(car: car)
            }
        }
    }
}

该方案的优势：

1. 所有布局代码仅需维护一份，修改CarsView样式时预览会自动同步，无需重复调整
2. 模拟数据统一在CoreDataManager中维护，所有用到车辆数据的视图预览都可以复用
3. 不影响原有正式环境的运行逻辑，不需要修改业务代码

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