SwiftUI：如何通过View A的按钮修改View B的数据模型？

问题描述 #

我正在开发一个多视图的SwiftUI应用：

• View A是包含多个冰淇淋类型按钮的独立视图
• View B为另一独立视图

希望点击View A中的按钮时，修改View B关联的model.icecreams数据，使View B做出相应变化。View B的核心代码如下：

ForEach(model.icecreams) { item in
    ZStack {
        Rectangle()
            .foregroundColor(Color("Celadon"))
        VStack {
            Image(systemName: "sun.min")
                .font(.system(size: geo.size.width/4))
                .foregroundColor(Color("Thulian pink"))
                .padding(.bottom)
            Text(item.name)
                .font(.largeTitle)
            Text("$ \(String(format: "%.2f", item.available.price))")
                .font(.title)
                .bold()
                
        }
    }
    .cornerRadius(30)
    .frame(width: geo.size.width / 1.6, height: 380)
}

解决方案 #

SwiftUI中实现跨视图共享状态并自动更新视图，最常用的就是ObservableObject + @Published组合，配合@StateObject/@ObservedObject或@EnvironmentObject传递状态。

步骤1：让Model成为可观察对象 #

首先确保你的数据Model遵循ObservableObject协议，并且需要自动通知视图更新的属性用@Published标记：

import SwiftUI

// 冰淇淋数据模型
struct IceCreamItem: Identifiable {
    let id = UUID()
    var name: String
    var available: IceCreamAvailability
}

struct IceCreamAvailability {
    var price: Double
}

// 可观察的全局模型
class IceCreamModel: ObservableObject {
    // @Published标记的属性变化时，会自动通知所有观察它的视图
    @Published var icecreams: [IceCreamItem] = []
    
    // 封装修改数据的方法，让逻辑更清晰
    func updateIceCreamPrice(for name: String, newPrice: Double) {
        guard let index = icecreams.firstIndex(where: { $0.name == name }) else { return }
        icecreams[index].available.price = newPrice
    }
    
    func addNewIceCream(_ item: IceCreamItem) {
        icecreams.append(item)
    }
}

步骤2：在父视图中初始化并传递Model #

在包含View A和View B的父视图中，用@StateObject创建Model实例（确保生命周期和父视图一致），然后传递给子视图：

struct MainView: View {
    // @StateObject用于创建唯一的Model实例，管理其生命周期
    @StateObject private var iceCreamModel = IceCreamModel()
    
    var body: some View {
        VStack(spacing: 20) {
            ViewA(model: iceCreamModel)
            ViewB(model: iceCreamModel)
        }
        .onAppear {
            // 初始化测试数据
            iceCreamModel.icecreams = [
                IceCreamItem(name: "香草", available: IceCreamAvailability(price: 4.99)),
                IceCreamItem(name: "草莓", available: IceCreamAvailability(price: 5.49))
            ]
        }
    }
}

步骤3：View A中接收Model并修改数据 #

在View A中用@ObservedObject接收Model，给按钮添加点击事件调用Model的修改方法：

struct ViewA: View {
    // @ObservedObject用于观察父视图传递过来的Model
    @ObservedObject var model: IceCreamModel
    
    var body: some View {
        HStack(spacing: 15) {
            Button("涨香草价格") {
                model.updateIceCreamPrice(for: "香草", newPrice: 5.99)
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            
            Button("加巧克力口味") {
                let newItem = IceCreamItem(name: "巧克力", available: IceCreamAvailability(price: 6.49))
                model.addNewIceCream(newItem)
            }
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}

步骤4：View B自动响应数据变化 #

View B中同样用@ObservedObject接收Model，当model.icecreams被修改时，@Published会自动触发View B刷新，你的原有ForEach代码会自动更新显示：

struct ViewB: View {
    @ObservedObject var model: IceCreamModel
    
    var body: some View {
        ScrollView {
            GeometryReader { geo in
                VStack(spacing: 20) {
                    ForEach(model.icecreams) { item in
                        ZStack {
                            Rectangle()
                                .foregroundColor(Color("Celadon"))
                            VStack {
                                Image(systemName: "sun.min")
                                    .font(.system(size: geo.size.width/4))
                                    .foregroundColor(Color("Thulian pink"))
                                    .padding(.bottom)
                                Text(item.name)
                                    .font(.largeTitle)
                                Text("$ \(String(format: "%.2f", item.available.price))")
                                    .font(.title)
                                    .bold()
                                    
                            }
                        }
                        .cornerRadius(30)
                        .frame(width: geo.size.width / 1.6, height: 380)
                    }
                }
            }
        }
    }
}

进阶：用EnvironmentObject简化传递 #

如果你的视图层级较深，手动传递Model太麻烦，可以用EnvironmentObject把Model注入环境，子视图直接读取：

1. 父视图中注入环境：

struct MainView: View {
    @StateObject private var iceCreamModel = IceCreamModel()
    
    var body: some View {
        VStack(spacing: 20) {
            ViewA()
            ViewB()
        }
        .environmentObject(iceCreamModel) // 注入环境
        .onAppear {
            // 初始化数据...
        }
    }
}

2. 子视图中用@EnvironmentObject接收：

struct ViewA: View {
    @EnvironmentObject var model: IceCreamModel
    // 按钮逻辑不变...
}

struct ViewB: View {
    @EnvironmentObject var model: IceCreamModel
    // 显示逻辑不变...
}

核心原理就是让Model成为可观察对象，当@Published属性变化时，所有观察该Model的视图都会自动刷新，从而实现View A修改数据、View B自动更新的效果。

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