SwiftUI EditButton() 错误答案

【问题标题】：SwiftUI EditButton() bugSwiftUI EditButton() 错误
【发布时间】：2021-02-01 15:27:09
【问题描述】：

我在模态框内展示一个列表。如果我在 NavigationView 中，则 EditButton 完全坏了。

struct ContentView: View {
@State var showSheetView = false

var body: some View {
    NavigationView {
        Button(action: {
            self.showSheetView.toggle()
        }) {
            Image(systemName: "bell.circle.fill")
                .font(Font.system(.title))
        }
        .sheet(isPresented: $showSheetView) {
            SheetView()
        }
    }
}
}

struct SheetView: View {
@State private var myArray: [String] = ["One", "Two", "Three"]
var body: some View {
    NavigationView {
        VStack {
            List {
                ForEach(myArray, id: \.self) { item in
                    Text(item)
                }.onDelete(perform: { indexSet in
                })
            }
        }
        .navigationBarItems(trailing: EditButton())
    }
}
}

如果我删除了我展示的 NavigationView，那么一开始它似乎可以工作，第二次展示它就会再次损坏。

struct ContentView: View {
@State var showSheetView = false

var body: some View {
        Button(action: {
            self.showSheetView.toggle()
        }) {
            Image(systemName: "bell.circle.fill")
                .font(Font.system(.title))
        }
        .sheet(isPresented: $showSheetView) {
            SheetView()
        }
}
}

【问题讨论】：

您能描述一下您认为损坏的地方以及想要的效果。两部电影看起来差不多。
所以我希望在点击编辑按钮进入编辑模式时。这意味着每行的红色按钮都会出现。有道理吗？
看第二张图片，这是我第一次以模态方式呈现屏幕时出现的。
如果将编辑按钮与列表而不是 vstack 关联会发生什么？
同样的错误...

标签： ios swift swiftui

【解决方案1】：

在装有 Xcode 12.1 / iOS 14.1 的 macOS Big Sur 上手动处理 editMode 对我有用。

当我旋转模拟器时，我也遇到了EditButton 在编辑模式下再次显示“编辑”的问题，下面的解决方案也解决了这个问题。

以下解决方案使用自定义 EditButton 结构来处理手动 editMode 绑定。先自定义EditButton：

struct EditButton: View {
    @Binding var editMode: EditMode

    var body: some View {
        Button {
            switch editMode {
            case .active: editMode = .inactive
            case .inactive: editMode = .active
            default: break
            }
        } label: {
            if let isEditing = editMode.isEditing, isEditing {
                Text("Done")
            } else {
                Text("Edit")
            }
        }
    }
}

使用上面的EditButton 很简单：

struct SheetView: View {
    @State private var myArray: [String] = ["One", "Two", "Three"]
    @State private var editMode = EditMode.inactive

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(myArray, id: \.self) { item in
                        Text(item)
                    }.onDelete(perform: { indexSet in
                    })
                }
            }
            .navigationBarItems(trailing: EditButton(editMode: $editMode))
            .environment(\.editMode, $editMode)
            .animation(.spring(response: 0))
        }
    }
}

尾随导航栏项目中的EditButton 处理SheetView 中保存的@State private var editMode。然后使用环境.environment(\.editMode, $editMode) 将这个editMode 注入到内部视图中。对于编辑模式过渡的动画效果，我发现.spring(response: 0)最合适。

【讨论】：

【解决方案2】：

代替

.navigationBarItems(trailing: EditButton())

你可以试试：

.toolbar { EditButton() }

我遇到了同样的问题，这对我来说很好。

【讨论】：

它对我有用，但很奇怪，不是吗？