SwiftUI跨视图将extraShoes元素追加到shoeData数组的实现方法

先排查两个核心基础问题 #

• 重复模型冗余：你定义的AddedShoes和Shoes字段完全一致，本质是同一个数据结构，没必要拆成两个独立类型，直接合并为统一的Shoe模型，后续省掉反复做类型转换的麻烦
• 全局数组无响应性：你现在用全局var声明的shoeData/extraShoes不会触发SwiftUI的视图刷新机制，哪怕你手动修改数组内容，界面也不会自动更新，必须用带状态发布能力的属性包装器管理这类和界面绑定的数据

状态管理选择说明 #

• @Binding 适合非常简单的父子直接传值场景：比如网格视图是横向滚动栏弹出的子页面，只需要把父视图的数组用$前缀生成绑定引用传给子视图，就能实现双向读写
• ObservableObject 适合平级视图、多层级嵌套的场景：对新手更友好，不用纠结视图层级的传值路径，你当前的两个视图（横向滚动栏、搜索网格）刚好适配这套方案，不容易出现绑定失效的问题

分步实现代码 #

1. 统一数据模型 #

把两个重复的结构体合并，减少冗余：

struct Shoe: Identifiable {
    let id = UUID()
    var title: String
    var image: Image
}

2. 创建统一的数据源管理器 #

用ObservableObject封装所有鞋款数据，把数据变更的逻辑集中管理：

class ShoeDataManager: ObservableObject {
    // 已添加到横向滚动栏的鞋款，数据变化自动通知所有绑定的视图刷新
    @Published var addedShoes: [Shoe] = [
        Shoe(title: "Adidas Adios Pro", image: Image(uiImage: #imageLiteral(resourceName: "AdidasAdiosPro"))),
        Shoe(title: "Nike Pegasus 37", image: Image(uiImage: #imageLiteral(resourceName: "NikePegs"))),
        Shoe(title: "Hoka Rincon 2", image: Image(uiImage: #imageLiteral(resourceName: "HokaRincon"))),
        Shoe(title: "Saucony Endorphin Speed", image: Image(uiImage: #imageLiteral(resourceName: "SauconySpeed"))),
        Shoe(title: "Nike Next% 2", image: Image(uiImage: #imageLiteral(resourceName: "NikeNext")))
    ]
    
    // 网格里展示的可选鞋款
    @Published var availableShoes: [Shoe] = [
        Shoe(title: "Saucony Kinvara 12", image: Image(uiImage: #imageLiteral(resourceName: "SauconyKinvara"))),
        Shoe(title: "Hoka Mach 4", image: Image(uiImage: #imageLiteral(resourceName: "HokaMach"))),
        Shoe(title: "North Face Vectiv", image: Image(uiImage: #imageLiteral(resourceName: "NFVectiv")))
    ]
    
    // 点击网格鞋款时的追加方法
    func addShoe(_ shoe: Shoe) {
        addedShoes.append(shoe)
    }
}

3. 视图层接入逻辑 #

在持有横向滚动栏、搜索网格的最上层父视图，用@StateObject创建数据管理器实例（@StateObject会在视图生命周期内保持实例稳定，不会被重复初始化）：

struct MainShoeView: View {
    // 全页面共享的统一数据源，所有子视图共用同一份实例
    @StateObject private var shoeDataManager = ShoeDataManager()
    // 搜索框绑定的输入值
    @State private var searchField = ""
    // 你原来定义的网格列配置
    let columns = [GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        VStack(spacing: 20) {
            // 替换原来的横向滚动栏代码
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 10) {
                    // 直接遍历数据源里的已添加鞋款
                    ForEach(shoeDataManager.addedShoes) { item in
                        ShoeCard(runner: item)
                    }
                }
            }
            
            // 替换原来的搜索网格代码
            LazyVGrid(columns: columns, spacing: 20) {
                // 修正原来的过滤逻辑：直接匹配鞋款标题，不要把整个模型转成字符串匹配
                ForEach(shoeDataManager.availableShoes.filter({
                    $0.title.contains(searchField) || searchField.isEmpty
                })) { item in
                    ShoeProfile(card: item)
                        .onTapGesture {
                            // 点击时直接调用数据源的追加方法
                            shoeDataManager.addShoe(item)
                        }
                }
            }
        }
    }
}

容易踩的坑提醒 #

• 不要把需要刷新界面的数组定义为全局变量，全局变量的修改不会触发SwiftUI的视图重绘
• 你原来的搜索过滤逻辑有bug：把整个Shoe实例转成字符串再匹配搜索词，永远搜不到结果，直接匹配title字段即可
• 如果后续ShoeProfile、ShoeCard拆成独立子视图，只需要给子视图加@ObservedObject var shoeDataManager: ShoeDataManager属性，把父视图的实例传进去就能共享数据，不需要重复创建新的数据源实例

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