web-dev-qa-db-ja.com

SwiftUI-リストからアイテムを削除すると致命的なエラーでクラッシュします：インデックスが範囲外です

SwiftUIのリストに問題があります。リストからアイテムを削除すると、エラーFatal error: Index out of rangeでクラッシュします。 onDeleteメソッドを使用しても機能せず、カスタム関数でも機能しません。私は何が間違っているのですか？

それはmacOSアプリであり、iOSではありません。私はmacOS10.15.1を使用しており、Xcode11.2.1を使用しています。

これが私のコードです：


import SwiftUI

struct TodoItem: Identifiable {
    var id = UUID()
    var name: String
    var isCompleted = false
}

struct TodoRow: View {
    @Binding var todo: TodoItem
    @State var buttonHover: Bool = false
    var index: Int
    var removeTodo: (_ index: Int) -> Void

    func toggleTodo() {
        self.$todo.isCompleted.wrappedValue.toggle()
    }

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Button(action: toggleTodo) {
                    Image(nsImage: NSImage(named: NSImage.Name(NSImage.menuOnStateTemplateName))!)
                        .resizable()
                        .frame(width: 8, height: 8)
                        .padding(3)
                        .opacity(todo.isCompleted ? 1 : buttonHover ? 0.5 : 0)
                }.buttonStyle(PlainButtonStyle())
                    .background(Capsule().stroke(Color.primary, lineWidth: 1))
                    .onHover(perform: { val  in self.buttonHover = val })
                Text("\(todo.name)").strikethrough(todo.isCompleted, color: Color.primary)
            }.opacity(todo.isCompleted ? 0.35 : 1)
            Divider().fixedSize(horizontal: false, vertical: true).frame(height: 1)
        }.contextMenu {
            Button(action: {
                self.removeTodo(self.index)
            }) {
                Text("Remove")
            }
        }
    }
}

struct TodoList: View {
    var listName: String
    @State var newTodo: String = ""
    @State var todos: [TodoItem] = []
    @State var showCompleted = false

    func addTodo() {
        let trimmedTodo = newTodo.trimmingCharacters(in: .whitespacesAndNewlines)
        if !trimmedTodo.isEmpty {
            todos.insert(TodoItem(name: trimmedTodo), at: 0)
            newTodo = ""
        }
    }

    func removeTodo(index: Int) -> Void {
        // remove is crashing the app :(
        self.todos.remove(at: index)
    }

    var body: some View {
        return VStack(alignment: .leading) {
            Text("\(listName)").font(.system(size: 20))
            HStack {
                TextField("New todo...", text: $newTodo)
                NativeButton("Add", keyEquivalent: .return) {
                    self.addTodo()
                }
            }
            List {
                ForEach(todos.indices.filter { self.showCompleted || !self.todos[$0].isCompleted }, id: \.self) { index in
                    TodoRow(todo: self.$todos[index], index: index, removeTodo: self.removeTodo)
                }.onDelete{offsets in
                    // remove is crashing the app :(
                    self.todos.remove(atOffsets: offsets)
                }
            }
            Toggle(isOn: $showCompleted) {
                Text("Show completed")
            }
        }.padding().frame(minWidth: 400, maxWidth: .infinity, minHeight: 200, maxHeight: .infinity)
    }
}

struct TodoList_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

あなたの助けに感謝し、厄介なコードをお詫びします、私はまだSwiftとSwiftUIに不慣れです。

swiftmacoslistswiftui
4
user3061425

こんにちは私はあなたがインデックスをフィルタリングしていることに気づきました、そして私は削除時にオフセットをチェックしました、そして私は時々オフセット範囲が実際のインデックスと異なることに気づきました、私はいくつかのことを変えようとしました：

      List {
                ForEach(todos.filter { self.showCompleted || !$0.isCompleted }, id: \.self) { item in
                    TodoRow(todo: item)
                }.onDelete{offsets in
                    self.todos.remove(atOffsets: offsets)
                }
            }

この方法では、TodoItemを「ハッシュ可能」に準拠させる必要があります-> struct TodoItem: Identifiable, Hashable

それであなたの問題を解決しなかったならそれを試してみて私を打ち返してください

1
fakiho

したがって、fakiho（ありがとう！）からの答えは完全な解決策ではありませんでしたが、それは私が解決策を見つけるのに役立ちました。問題はTodoRowの@Binding var todo: TodoItemにあったと思います。 TodoItem全体ではなく、必要なすべてのプロパティを渡すことになり、機能しています。

誰かが同じ問題を抱えている場合、これは完全に機能するコードです：

struct TodoRow: View {
    @State var buttonHover: Bool = false
    var name: String
    var isCompleted: Bool
    var toggleItem: () -> Void
    var removeItem: () -> Void

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Button(action: toggleItem) {
                    Image(nsImage: NSImage(named: NSImage.Name(NSImage.menuOnStateTemplateName))!)
                        .resizable()
                        .frame(width: 8, height: 8)
                        .padding(3)
                        .opacity(isCompleted ? 1 : buttonHover ? 0.5 : 0)
                }.buttonStyle(PlainButtonStyle())
                    .background(Capsule().stroke(Color.primary, lineWidth: 1))
                    .onHover(perform: { val  in self.buttonHover = val })
                Text("\(name)").strikethrough(isCompleted, color: Color.primary)
            }.opacity(isCompleted ? 0.35 : 1)
            Divider().fixedSize(horizontal: false, vertical: true).frame(height: 1)
        }.contextMenu {
            Button(action: removeItem) {
                Text("Delete")
            }
        }
    }
}

struct TodoList: View {
    var listName: String
    @State var newTodo: String = ""
    @State var todos: [TodoItem] = []
    @State var showCompleted = false

    func addTodo() {
        let trimmedTodo = newTodo.trimmingCharacters(in: .whitespacesAndNewlines)
        if !trimmedTodo.isEmpty {
            todos.insert(TodoItem(name: trimmedTodo), at: 0)
            newTodo = ""
        }
    }

    var body: some View {
        return VStack(alignment: .leading) {
            Text("\(listName)").font(.headline)
            HStack {
                TextField("New todo...", text: $newTodo)
                NativeButton("Add", keyEquivalent: .return) {
                    self.addTodo()
                }
            }
            List {
                ForEach(todos.indices.filter { self.showCompleted || !todos[$0].isCompleted }, id: \.self) { index in
                    TodoRow(
                        name: self.todos[index].name,
                        isCompleted: self.todos[index].isCompleted,
                        toggleItem: {
                            self.$todos[index].isCompleted.wrappedValue.toggle()
                        },
                        removeItem: {
                            self.todos.remove(at: index)
                        }
                    )
                }.onDelete { offsets in
                    self.todos.remove(atOffsets: offsets)
                }
            }
            Toggle(isOn: $showCompleted) {
                Text("Show completed")
            }
        }.padding().frame(minWidth: 400, maxWidth: .infinity, minHeight: 200, maxHeight: .infinity)
    }
}
0
user3061425