ForEach 中的 SwiftUI 索引超出范围

Question

经过几个小时的调试后，我发现错误出在MenuItemView文件夹中的foreach 循环内ContentViews。

应用程序崩溃，错误是：

Fatal error: Index out of range: file Swift/ContiguousArrayBuffer.swift, line 444。

信息：

我有一个内部的 anObservableObject 作为Array数据Structs存储。

问题：

ForEach 在 0 和数组计数 + 1 之间。这样我就可以有一个额外的项目来添加新元素。在 ForEach 中检查索引是否在范围内（if (idx >= palettesOO.palettes.count)然后显示加号）。

但是当我右键单击任何单元格并单击“删除”时，它会崩溃。RemovePalette这调用了类中的函数Manager。数据从内部的数组中删除ObservableObject- 这也有效。

调用该函数后，应用程序崩溃（我知道这一点是因为我在函数调用后打印了一条消息）。我发现当视图重绘（更新）时会发生崩溃。

如果我有一个不需要绑定的视图元素，例如 a Text，那么它可以工作，如果它需要绑定，例如 a ，TextField它就会崩溃。Text(palettesOO.palettes[idx].palName)ForEach 内的 else 内部可以工作，但需要绑定的视图元素或子视图不起作用：TextField("", text: $palettesOO.palettes[idx].palName)崩溃。

我尝试过用类似的东西修改 ForEach但没有成功。

代码和数据：

class PalettesOO: ObservableObject {
    @Published var palettes = [Palette]()
}

菜单项视图：

struct MenuItemView: View {
    @ObservedObject var palettesOO = PalettesOO()
    
    var body: some View {
        VStack {
            SectionView("Palettes") {
                LazyVGrid(columns: Array(repeating: GridItem(.fixed(viewCellSize), spacing: viewCellSpacing), count: viewColCount), spacing: viewCellSpacing) {
                    ForEach(0..<palettesOO.palettes.count + 1, id: \.self) { idx in
                        if (idx >= palettesOO.palettes.count) {
                            Button(action: {
                                newPalettePopover = true
                            }, label: {
                                Image(systemName: "plus.square").font(.system(size: viewCellSize))
                            }).buttonStyle(PlainButtonStyle())
                        }
                        else {
                            // Works
                            Text(palettesOO.palettes[idx].palName)
                            // Does not work
                            TextField("ASD", text: $palettesOO.palettes[palettesOO.palettes.count - 1].palName).frame(width: 100, height: 100).background(Color.red).contextMenu(ContextMenu(menuItems: {
                                Button(action: {}, label: {
                                    Text("Rename")
                                })
                            Button(action: { Manager.RemovePalette(name: palettesOO.palettes[idx].palName); print("Len \(palettesOO.palettes.count)") }, label: {
                                    Text("Delete")
                                })
                            }))
                            // Original code, also crashes (PalettePreviewView is a custom subview which does not matter for this)
//                            PalettePreviewView(palette: $palettesOO.palettes[palettesOO.palettes.count - 1], colNum: $previewColCount, cellSize: $viewCellSize).cornerRadius(viewCellSize / 100 * viewCellRadius).contextMenu(ContextMenu(menuItems: {
//                                    Button(action: {}, label: {
//                                        Text("Rename")
//                                    })
//                                Button(action: { Manager.RemovePalette(name: palettesOO.palettes[idx].palName); print("Len \(palettesOO.palettes.count)") }, label: {
//                                        Text("Delete")
//                                    })
//                                }))
                        }
                    }
                }
            }
        }.padding().fixedSize()
    }
}

经理：

class Manager {
    static func RemovePalette(name: String) {
        var url = assetFilesDirectory(name: "Palettes", shouldCreate: true)
        url?.appendPathComponent("\(name).json")
        if (url == nil) {
            return
        }

        do {
            try FileManager.default.removeItem(at: url!)
        } catch let error as NSError {
            print("Error: \(error.domain)")
        }
        LoadAllPalettes()
        UserDefaults.standard.removeObject(forKey: "\(k_paletteIndicies).\(name)")
    }
}

我知道这么复杂的问题不适合发布在 Stack Overflow 上，但我想不出任何其他方法。

项目版本控制在我的GitHub上公开，以防需要找到解决方案。

编辑 12/21/2020 @ 8:30pm：感谢@SHS，它现在就像一个魅力！这是最终的工作代码：

struct MenuItemView: View {
    @ObservedObject var palettesOO = PalettesOO()
    
    var body: some View {
        VStack {
            ...
            ForEach(0..<palettesOO.palettes.count + 1, id: \.self) { idx in
                ...
                ////  @SHS Changed :-
                Safe(self.$palettesOO.palettes, index: idx) { binding in
                    TextField("ASD", text: binding.palName).frame(width: 100, height: 100).background(Color.red).contextMenu(ContextMenu(menuItems: {
                        Button(action: {}, label: {
                            Text("Rename")
                        })
                        Button(action: { Manager.RemovePalette(name: binding.wrappedValue.palName); print("Len \(palettesOO.palettes.count)") }, label: {
                            Text("Delete")
                        })
                    }))
                }
            }
        }
        ...
    }
}

////  @SHS Added :-
//// You may keep the following structure in different file or Utility folder. You may rename it properly.
struct Safe<T: RandomAccessCollection & MutableCollection, C: View>: View {
    
    typealias BoundElement = Binding<T.Element>
    private let binding: BoundElement
    private let content: (BoundElement) -> C
    
    init(_ binding: Binding<T>, index: T.Index, @ViewBuilder content: @escaping (BoundElement) -> C) {
        self.content = content
        self.binding = .init(get: { binding.wrappedValue[index] },
                             set: { binding.wrappedValue[index] = $0 })
    }
    
    var body: some View {
        content(binding)
    }
}

Answer 1

根据stackoverflow 链接上的答案

创建一个结构如下

struct Safe<T: RandomAccessCollection & MutableCollection, C: View>: View {
   
   typealias BoundElement = Binding<T.Element>
   private let binding: BoundElement
   private let content: (BoundElement) -> C

   init(_ binding: Binding<T>, index: T.Index, @ViewBuilder content: @escaping (BoundElement) -> C) {
      self.content = content
      self.binding = .init(get: { binding.wrappedValue[index] },
                           set: { binding.wrappedValue[index] = $0 })
   }
   
   var body: some View {
      content(binding)
   }
}

然后包装您的代码以访问它，如下所示

Safe(self.$palettesOO.palettes, index: idx) { binding in
    //Text(binding.wrappedValue.palName)
    TextField("ASD", text: binding.palName)
    //TextField("ASD", text: $palettesOO.palettes[palettesOO.palettes.count - 1].palName)
       .frame(width: 100, height: 100).background(Color.red)
       .contextMenu(ContextMenu(menuItems: {
             Button(action: {}, label: {
                 Text("Rename")
             })
             Button(action: { Manager.RemovePalette(name: binding.wrappedValue.palName); print("Len \(palettesOO.palettes.count)") }, label: {
                 Text("Delete")
             })
       }))
    }

我希望这可以帮助你（直到它在 Swift 中得到纠正）