SwiftUI切换视图编辑模式的EditButton

EditButton 是 SwiftUI 提供的一个内置组件，用于切换视图的编辑模式。它在 List 和类似视图中非常常用，用来快速启用和退出编辑状态，例如多选、删除、移动项目等。

基本功能

EditButton 的作用：

它会自动在界面上显示一个按钮，通常标题是 “Edit”（编辑）或 “Done”（完成）。

点击 “Edit” 按钮后，支持编辑的视图（例如 List）会切换到编辑模式，用户可以进行多选、删除、排序等操作。

再次点击 “Done” 后，会退出编辑模式。

使用方式

EditButton 通常与 List 配合使用。

import SwiftUI

struct ContentView: View {
    @State private var items = ["Apple", "Banana", "Cherry"]
    @State private var selection = Set<String>() // 用于多选

    var body: some View {
        NavigationStack {
            List(items, id: \.self, selection: $selection) { item in
                Text(item)
            }
            .navigationTitle("Fruits")
            .toolbar {
                EditButton() // 在工具栏添加编辑按钮
            }
        }
    }
}

#Preview {
    ContentView()
}

运行效果

1、默认状态：

列表是不可编辑的，用户点击项目后只会高亮或执行某个操作。

2、点击 Edit 按钮：

列表进入编辑模式，显示复选框，用户可以进行多选。

3、点击 Done 按钮：

列表退出编辑模式，多选框消失。

主要特性

1、自动切换模式：

EditButton 会自动管理编辑模式的切换，不需要手动写代码来控制。

2、与 List 的 selection 配合：

如果为 List 设置了 selection 属性（例如绑定到一个 Set），进入编辑模式后会自动启用多选功能。

3、与 onDelete 和 onMove 配合：

在编辑模式下，可以启用删除或移动功能（例如通过手势或按钮删除项目）。

更复杂的用法

允许删除和重新排序

import SwiftUI

struct ContentView: View {
    @State private var items = ["Apple", "Banana", "Cherry"]

    var body: some View {
        NavigationStack {
            List {
                ForEach(items, id: \.self) { item in
                    Text(item)
                }
                .onDelete(perform: deleteItems) // 删除操作
                .onMove(perform: moveItems)    // 移动操作
            }
            .navigationTitle("Fruits")
            .toolbar {
                EditButton() // 启用编辑按钮
            }
        }
    }

    func deleteItems(at offsets: IndexSet) {
        items.remove(atOffsets: offsets) // 从数组中删除项目
    }

    func moveItems(from source: IndexSet, to destination: Int) {
        items.move(fromOffsets: source, toOffset: destination) // 调整数组顺序
    }
}

#Preview {
    ContentView()
}

运行效果

1、点击 Edit 按钮，List 的项目右侧会显示删除按钮，同时支持拖动排序。

2、点击 Done 按钮，退出编辑模式，删除按钮和拖动控件消失。

自定义按钮

如果不想用默认的 EditButton，也可以通过 @Environment(\.editMode) 自定义按钮实现类似功能。

自定义示例

import SwiftUI

struct ContentView: View {
    @Environment(\.editMode) private var editMode
    @State private var items = ["Apple", "Banana", "Cherry"]

    var body: some View {
        VStack {
            List {
                ForEach(items, id: \.self) { item in
                    Text(item)
                }
                .onDelete(perform: deleteItems)
            }
            Button(editMode?.wrappedValue == .active ? "Done" : "Edit") {
                withAnimation {
                    editMode?.wrappedValue = editMode?.wrappedValue == .active ? .inactive : .active
                }
            }
            .padding()
        }
    }

    func deleteItems(at offsets: IndexSet) {
        items.remove(atOffsets: offsets)
    }
}

#Preview {
    ContentView()
}

总结

EditButton 是一个方便的工具，用于启用和退出视图的编辑模式。

它适合配合 List 使用，尤其是需要多选、删除、重新排序等功能时。

如果需要更多控制，可以使用 @Environment(\.editMode) 自定义行为。