使用 SwiftUI 离开视图时，如何以编程方式使 List 的 editMode 处于非活动状态？

Question

给定一个带有 EditButton() 的列表视图，如果正在编辑视图（用户点击编辑按钮），当用户导航离开视图时，如何以编程方式禁用编辑模式？ （例如，与 iPhone 上电话应用程序中的收藏夹视图类似的行为）

struct ContentView2: View {
    @State var fruits = ["Apple", "Banana"]

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .onDelete { _ in
                    print("Delete")
                }
            }
            .toolbar {
                EditButton()
            }
        }
        .onDisappear {
            // make List's editMode be .inactive; how?
        }
    }
}

Answer 1

您可以使用.environment 将列表的当前编辑模式与@State 属性绑定，如awesome article 所示。

struct ContentView: View {
    @State var editMode = EditMode.inactive /// the edit mode

    @State var fruits = ["Apple", "Banana"]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .onDelete { _ in
                    print("Delete")
                }
            }
            .toolbar {
                EditButton()
            }
            .environment(\.editMode, $editMode) /// bind it here!
        }
        .onDisappear {
            editMode = .inactive /// set to inactive
        }
    }
}

此外，如果您使用NavigationLink 来呈现新视图，您的onDisappear 将不会被调用，因为您附加到它的NavigationView 实际上不会消失。您应该将其附加到NavigationLink 的标签上（来自this answer）。

最终代码：

struct ContentView: View {
    @State var editMode = EditMode.inactive /// the edit mode
    @State var fruits = ["Apple", "Banana"]
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination:  Text("New view!")) {
                    Text("Navigate away")
                        .onDisappear {
                            editMode = .inactive /// set to inactive
                        }
                }
                
                List {
                    ForEach(fruits, id: \.self) { fruit in
                        Text(fruit)
                    }
                    .onDelete { _ in
                        print("Delete")
                    }
                }
                .toolbar {
                    EditButton()
                }
                .environment(\.editMode, $editMode) /// bind it here!
            }
        }
    }
}

结果：

Without editMode = .inactive	With editMode = .inactive