【SwiftUI基础篇】8 EditButton 控制打开和关闭批量编辑模式

EditButton 负责控制打开和关闭编辑模式。当点击开发编辑模式时，SwiftUI 会为我们自动生成符合 iOS 习惯的 删除和移动操作 UI（当然如果我们只绑定了删除，就只会显示删除 UI）。注意这个编辑模式需要和 NavigationView 相结合。

一、基本编辑模式

struct ContentView: View {
    @State private var fruits = ["苹果","香蕉","榴莲","芒果"]
    var body: some View {
        NavigationView{
            List {
                ForEach(
                    fruits,
                    id: .self
                ) { fruit in
                    Text(fruit)
                }
                .onDelete {
                    print($0)
                    self.deleteFruit(at :$0)
                }
                .onMove {
                    print($0,$1)
                    self.moveFruit(from: $0, to: $1)
                }
            }
            .navigationTitle("水果编辑")
            //绑定 EditButton 的方法就是使用 .toolbar
            .toolbar {
                EditButton()//切换当前编辑范围的编辑模式的按钮。
            }
        }
    }
    func deleteFruit(at offset: IndexSet) {
        fruits.remove(atOffsets: offset)
    }
    func moveFruit(from source: IndexSet, to destination: Int) {
        fruits.move(fromOffsets: source, toOffset: destination)
    }
}

使用 .navigationBarItems可以控制 EditButton 是在左（leading）还是右（trailing）、.navigationBarItems(leading: EditButton())、.navigationBarItems(trailing: EditButton())

 二、更复杂的编辑模式

可以通过下面的方法获取当前的 EditMode，并实现更复杂的编辑操作这个例子就是通过改变视图来实现编辑。

@State var isEditMode: EditMode = .inactive
@State var sampleData = ["苹果", "香蕉", "木瓜", "芒果"]
var body: some View {
    NavigationView {
        List(0..<sampleData.count) { i in
            // 通过对不同 edit mode 设置不同视图来修改内容
            if (isEditMode == .active) {
                TextField("水果", text: $sampleData[i])
            } else  {
                Text(sampleData[i])
            }
        }
        .navigationTitle(Text("水果"))
        .navigationBarItems(trailing: EditButton())
        // 用 .environment 获取当前的 edit mode，
        // 注意这行需要在添加 EditButton 之后加
        .environment(.editMode, $isEditMode)
    }
}

enum EditMode 是一个枚举视图的模式，指示用户是否可以编辑其内容。

1.active 激活状态：视图内容可以编辑。

2.inactive 非激活状态：无法编辑视图内容。

3.transient 临时状态 视图处于临时编辑模式。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/122