SwiftUI从列表中删除行

基础概念

SwiftUI 是苹果推出的一个用于构建用户界面的框架，它允许开发者使用声明式语法来描述用户界面。在 SwiftUI 中，List 是一个常用的组件，用于展示一组数据。

类型与应用场景

静态列表：适用于展示固定内容的数据。
动态列表：适用于需要实时更新的数据，如待办事项列表、新闻列表等。

示例代码：从列表中删除行

假设我们有一个待办事项列表，每个待办事项都有一个唯一的标识符和一个描述。我们将展示如何从列表中删除一个待办事项。

import SwiftUI

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
}

class TodoViewModel: ObservableObject {
    @Published var todos = [
        TodoItem(title: "Buy groceries"),
        TodoItem(title: "Finish report"),
        TodoItem(title: "Call mom")
    ]
    
    func deleteTodo(at offsets: IndexSet) {
        todos.remove(atOffsets: offsets)
    }
}

struct ContentView: View {
    @StateObject private var viewModel = TodoViewModel()
    
    var body: some View {
        NavigationView {
            List {
                ForEach(viewModel.todos) { todo in
                    Text(todo.title)
                }
                .onDelete(perform: viewModel.deleteTodo)
            }
            .navigationTitle("Todos")
            .toolbar {
                EditButton()
            }
        }
    }
}

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

解释

TodoItem 结构体：定义了一个待办事项，包含一个唯一的 id 和一个 title。
TodoViewModel 类：使用 @Published 属性包装器来通知视图数据的变化。deleteTodo 方法用于删除指定索引的待办事项。
ContentView 视图：使用 List 组件展示待办事项列表，并通过 onDelete 手势来触发删除操作。

遇到的问题及解决方法

问题：删除行时没有反应

原因：可能是由于 @Published 属性包装器没有正确触发视图更新，或者 onDelete 手势没有正确绑定到 deleteTodo 方法。

解决方法：

确保 TodoViewModel 是使用 @StateObject 创建的。
确保 onDelete 手势正确绑定到 deleteTodo 方法。

struct ContentView: View {
    @StateObject private var viewModel = TodoViewModel()
    
    var body: some View {
        NavigationView {
            List {
                ForEach(viewModel.todos) { todo in
                    Text(todo.title)
                }
                .onDelete(perform: viewModel.deleteTodo) // 确保这里正确绑定
            }
            .navigationTitle("Todos")
            .toolbar {
                EditButton()
            }
        }
    }
}

通过以上步骤，可以确保从列表中删除行的功能正常工作。