列表的增删改查

在 SwiftUI 中，列表（List）的增删改查（CRUD）操作是构建动态数据驱动应用的基础。下面将通过示例演示如何在列表中实现增（添加）、删（删除）、改（修改）和查（查询）操作。

1. 数据模型

首先，定义一个数据模型，通常是一个结构体。

示例：定义数据模型

struct Item: Identifiable {
    var id = UUID() // 唯一标识符
    var name: String
}

2. 增加项（Create）

使用 @State 来管理列表中的数据，并提供按钮以添加新项。

示例：添加项

import SwiftUI

struct CRUDListExample: View {
    @State private var items: [Item] = [Item(name: "Apple"), Item(name: "Banana")]
    @State private var newItemName: String = ""

    var body: some View {
        VStack {
            List {
                ForEach(items) { item in
                    Text(item.name) // 显示列表项
                }
                .onDelete(perform: delete) // 删除操作
            }
            .navigationTitle("CRUD List") // 设置导航栏标题
            
            HStack {
                TextField("New Item", text: $newItemName) // 输入框
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                Button("Add") {
                    addItem() // 添加新项
                }
                .disabled(newItemName.isEmpty) // 当输入框为空时禁用按钮
            }
            .padding()
        }
    }

    // 添加新项
    private func addItem() {
        let newItem = Item(name: newItemName)
        items.append(newItem) // 添加项
        newItemName = "" // 清空输入框
    }

    // 删除项
    private func delete(at offsets: IndexSet) {
        items.remove(atOffsets: offsets) // 删除指定项
    }
}

3. 删除项（Delete）

在上面的示例中，使用 onDelete 修饰符实现删除操作。可以通过滑动手势来删除列表项。

4. 修改项（Update）

要实现修改功能，可以使用一个新的视图来编辑项，或者在列表中直接提供编辑功能。

示例：修改项

struct EditItemView: View {
    @Binding var item: Item // 绑定项
    @State private var editedName: String

    init(item: Binding<Item>) {
        self._item = item
        self._editedName = State(initialValue: item.wrappedValue.name) // 初始化编辑名称
    }

    var body: some View {
        VStack {
            TextField("Edit Item", text: $editedName) // 编辑框
                .textFieldStyle(RoundedBorderTextFieldStyle())
            Button("Save") {
                item.name = editedName // 保存更改
            }
            .padding()
        }
        .navigationTitle("Edit Item") // 设置导航栏标题
    }
}

在主视图中调用编辑视图

NavigationLink(destination: EditItemView(item: $items[index])) {
    Text(item.name) // 点击进入编辑视图
}

5. 查询项（Read）

在列表中，读取操作通过直接访问数组来实现，用户可以看到当前的所有项。

6. 综合示例

整合以上操作，你可以创建一个完整的增删改查示例。

完整示例：CRUD 列表

struct CompleteCRUDListExample: View {
    @State private var items: [Item] = [Item(name: "Apple"), Item(name: "Banana")]
    @State private var newItemName: String = ""
    @State private var selectedItem: Item?

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(items) { item in
                        NavigationLink(destination: EditItemView(item: Binding(get: {
                            item
                        }, set: { newValue in
                            if let index = items.firstIndex(where: { $0.id == item.id }) {
                                items[index] = newValue // 更新项
                            }
                        }))) {
                            Text(item.name) // 列表项
                        }
                    }
                    .onDelete(perform: delete) // 删除操作
                }
                .navigationTitle("Complete CRUD List") // 设置导航栏标题
                
                HStack {
                    TextField("New Item", text: $newItemName) // 输入框
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    Button("Add") {
                        addItem() // 添加新项
                    }
                    .disabled(newItemName.isEmpty) // 禁用按钮
                }
                .padding()
            }
        }
    }

    private func addItem() {
        let newItem = Item(name: newItemName)
        items.append(newItem) // 添加项
        newItemName = "" // 清空输入框
    }

    private func delete(at offsets: IndexSet) {
        items.remove(atOffsets: offsets) // 删除项
    }
}

7. 总结

  • 增（Create）：使用按钮和输入框添加新项。
  • 删（Delete）：使用滑动手势和 onDelete 实现删除功能。
  • 改（Update）：通过绑定将修改操作传递到编辑视图。
  • 查（Read）：直接访问列表中的数据以展示当前项。

通过实现增删改查功能，可以为 SwiftUI 应用提供丰富的用户交互体验，满足各种应用场景的需求。

Last Updated::