SwiftUI创建新元素后绑定打开Sheet触发数组越界问题求助

问题原因 #

1. API用法不符合设计意图：你使用sheet(item: $editItem)时，传入的是Binding<Binding<Item>?>类型，但sheet(item:)的设计目标是接收可选的Identifiable类型值，而非绑定的绑定。这种错误用法会导致SwiftUI在处理状态同步时出现异常。
2. 状态更新时机冲突：执行model.items.append后立刻赋值$model.items.last，此时SwiftUI尚未完成视图的状态刷新，数组的内部存储还处于过渡状态，生成的绑定引用的索引在后续视图刷新时会变为无效索引，最终触发数组越界错误。

解决方案 #

方法一：通过ID跟踪编辑项（推荐） #

使用Item的id来跟踪要编辑的条目，避免直接持有数组元素的绑定，从根源上解决索引失效问题：

import SwiftUI

struct Model {
    var items: [Item]
}

struct Item: Identifiable {
    var id: String
}

// 让String符合Identifiable，用于sheet的item参数
extension String: Identifiable {
    public var id: String { self }
}

struct MainView: View {
    @Binding var model: Model
    @State private var editingItemId: String?
    
    var body: some View {
        VStack {
            List($model.items) { $item in
                ItemCardView(item: item)
                    .onTapGesture {
                        editingItemId = item.id
                    }
            }
            Button(action: {
                let newItem = Item(id: "New item")
                model.items.append(newItem)
                editingItemId = newItem.id
            }) {
                Image(systemName: "plus")
            }
        }
        .sheet(item: $editingItemId) { itemId in
            // 通过ID找到数组中对应的元素绑定
            if let index = model.items.firstIndex(where: { $0.id == itemId }) {
                ItemEditView(item: $model.items[index])
            }
        }
    }
}

struct ItemCardView: View {
    var item: Item
    var body: some View {
        Text(item.id)
    }
}

// 简化ItemEditView，直接绑定修改
struct ItemEditView: View {
    @Binding var item: Item
    
    var body: some View {
        TextField("Title", text: $item.id)
            .padding()
    }
}

@main
struct MyApp: App {
    @State var model = Model(items: [])
    
    var body: some Scene {
        WindowGroup {
            MainView(model: $model)
        }
    }
}

方法二：使用isPresented配合临时状态 #

如果不想修改跟踪方式，可以用sheet(isPresented:)手动控制弹窗显示，配合临时存储的编辑项：

struct MainView: View {
    @Binding var model: Model
    @State private var isEditSheetPresented = false
    @State private var editingItem: Item?
    
    var body: some View {
        VStack {
            List($model.items) { $item in
                ItemCardView(item: item)
                    .onTapGesture {
                        editingItem = item
                        isEditSheetPresented = true
                    }
            }
            Button(action: {
                let newItem = Item(id: "New item")
                model.items.append(newItem)
                editingItem = newItem
                isEditSheetPresented = true
            }) {
                Image(systemName: "plus")
            }
        }
        .sheet(isPresented: $isEditSheetPresented) {
            // 将可选Item转为绑定
            if let $item = Binding($editingItem) {
                ItemEditView(item: $item)
                    .onDisappear {
                        // 同步编辑后的内容回模型
                        if let editedItem = editingItem, let index = model.items.firstIndex(where: { $0.id == editedItem.id }) {
                            model.items[index] = editedItem
                        }
                        editingItem = nil
                    }
            }
        }
    }
}

额外优化 #

原ItemEditView中的中间状态editingItem完全可以移除，直接通过绑定修改模型数据，既简化代码又避免同步错误，如方法一中的ItemEditView实现。

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