具有多个编辑按钮的SwiftUI表单

尝试创建一个包含多个部分的

表单

，每个

部分都有自己的
编辑按钮

如何将
节
触发为“编辑模式”，而不触发
表单中的所有节
，如所附gif所示


如何跟踪某个
部分中的
编辑按钮
是否被触发，从而在该
部分中出现
按钮


我使用了来自以下两个来源的代码：
,


代码如下：

import SwiftUI

struct ContentView: View {
    @Environment(\.editMode) private var editMode
    @State private var section1: [String] = ["Item 1", "Item 2"]
    @State private var section2: [String] = ["Item 3", "Item 4"]
    @State private var isEditingSection1 = false
    @State private var isEditingSection2 = false
    
    var body: some View {
        Form {
            // Section 1
            Section (header:
                        EditButton().frame(maxWidth: .infinity, alignment: .trailing)
                        .overlay(
                            HStack {
                                Image(systemName: "folder")
                                    .foregroundColor(Color.gray)
                            Text("Section 1")
                                .textCase(.none)
                                .foregroundColor(Color.gray)
                            }, alignment: .leading)
                        .foregroundColor(.blue)) {
                ForEach(section1, id: \.self) { item in
                   Text(item)
                }
                .onDelete(perform: deleteSection1)
                .onMove(perform: moveSection1)
                
                // Add item option
                if editMode?.wrappedValue.isEditing ?? true /*isEditingSection1*/ {
                    Button ("Add Item") {
                        // add action
                    }
                }
            }
            
            // Section 2
            Section (header:
                        EditButton().frame(maxWidth: .infinity, alignment: .trailing)
                        .overlay(
                            HStack {
                                Image(systemName: "tray")
                                    .foregroundColor(Color.gray)
                                Text("Section 2")
                                    .textCase(.none)
                                    .foregroundColor(Color.gray)
                            }, alignment: .leading)
                        .foregroundColor(.blue)) {
                ForEach(section2, id: \.self) { item in
                    Text(item)
                }
                .onDelete(perform: deleteSection2)
                .onMove(perform: moveSection2)
                
                // Add item option
                if editMode?.wrappedValue.isEditing ?? true /*isEditingSection2*/ {
                    Button ("Add Item") {
                        // add action
                    }
                }
            }
            
        }
    }
    
    func deleteSection1(at offsets: IndexSet) {
        section1.remove(atOffsets: offsets)
    }
    
    func moveSection1(from source: IndexSet, to destination: Int) {
        section1.move(fromOffsets: source, toOffset: destination)
    }
    
    func deleteSection2(at offsets: IndexSet) {
        section2.remove(atOffsets: offsets)
    }
    
    func moveSection2(from source: IndexSet, to destination: Int) {
        section2.move(fromOffsets: source, toOffset: destination)
    }
}

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

没有内置的东西为每个部分设置不同的编辑模式

但您可以显式地使用它来设置编辑模式，并为每一行禁用/启用删除和移动操作

下面是可能的解决方案演示

为此，您需要首先使用绑定布尔值创建自己的EditButton

struct EditButton: View {
    @Binding var isEditing: Bool

    var body: some View {
        Button(isEditing ? "DONE" : "EDIT") {
            withAnimation {
                isEditing.toggle()
            }
        }
    }
}

现在，您的
表单
视图已关闭

struct ContentViewEditModeDemo: View {
    @State private var section1: [String] = ["Item 1", "Item 2"]
    @State private var section2: [String] = ["Item 3", "Item 4"]
    @State private var isEditingSection1 = false
    @State private var isEditingSection2 = false
    
    private var isEditingOn: Bool { //<=== Here
        isEditingSection1 || isEditingSection2
    }
    
    var body: some View {
        Form {
            // Section 1
            Section (header:
                        EditButton(isEditing: $isEditingSection1).frame(maxWidth: .infinity, alignment: .trailing) //<=== Here
                        .overlay(
                            HStack {
                                Image(systemName: "folder")
                                    .foregroundColor(Color.gray)
                            Text("Section 1")
                                .textCase(.none)
                                .foregroundColor(Color.gray)
                            }, alignment: .leading)
                        .foregroundColor(.blue)) {
                ForEach(section1, id: \.self) { item in
                   Text(item)
                }
                .onDelete(perform: deleteSection1)
                .onMove(perform: moveSection1)
                .moveDisabled(!isEditingSection1) //<=== Here
                .deleteDisabled(!isEditingSection1) //<=== Here

                // Add item option
                if isEditingSection1 { //<=== Here
                    Button ("Add Item") {
                        // add action
                    }
                }
            }
            
            // Section 2
            Section(header:
                        EditButton(isEditing: $isEditingSection2).frame(maxWidth: .infinity, alignment: .trailing) //<=== Here
                        .overlay(
                            HStack {
                                Image(systemName: "tray")
                                    .foregroundColor(Color.gray)
                                Text("Section 2")
                                    .textCase(.none)
                                    .foregroundColor(Color.gray)
                            }, alignment: .leading)
                        .foregroundColor(.blue)) {
                ForEach(section2, id: \.self) { item in
                    Text(item)
                }
                .onDelete(perform: deleteSection1)
                .onMove(perform: moveSection1)
                .moveDisabled(!isEditingSection2) //<=== Here
                .deleteDisabled(!isEditingSection2) //<=== Here
                
                // Add item option
                if isEditingSection2 { //<=== Here
                    Button ("Add Item") {
                        // add action
                    }
                }
            }
        }.environment(\.editMode, isEditingOn ? .constant(.active) : .constant(.inactive)) //<=== Here
    }
    
    func deleteSection1(at offsets: IndexSet) {
        section1.remove(atOffsets: offsets)
    }
    
    func moveSection1(from source: IndexSet, to destination: Int) {
        section1.move(fromOffsets: source, toOffset: destination)
    }
    
    func deleteSection2(at offsets: IndexSet) {
        section2.remove(atOffsets: offsets)
    }
    
    func moveSection2(from source: IndexSet, to destination: Int) {
        section2.move(fromOffsets: source, toOffset: destination)
    }
}

struct ContentViewEditModeDemo:View{
@国家私有var section1:[字符串]=[“项目1”、“项目2”]
@国家私有变量第2节：[字符串]=[“第3项”、“第4项”]
@状态私有变量isEditingSection1=false
@状态私有变量isEditingSection2=false
私有变量isEditingOn:Bool{//