SwiftUI 按钮作为 EditButton

Posted 2023-02-22

【中文标题】SwiftUI 按钮作为 EditButton

【英文标题】：SwiftUI Button as EditButton

【发布时间】：2019-12-12 03:12:43

【问题描述】：

如何使用像EditButton 这样的按钮？ 或者如何使用按钮从列表中激活编辑模式？ 或者我如何从EditButton“编辑”/“完成”更改名称？

【问题讨论】：

您可能想澄清您的问题。您是指（仅）按钮的标题吗？或者你想知道如何进入List的编辑模式？或两者？ （在这种情况下，您可能需要创建一个单独的问题）。另外，到目前为止您尝试过什么？你能分享一些代码吗？

我的意思是两者..我想使用像editbutton这样的按钮激活列表的编辑模式，我知道我可以使用editbutton但我想使用其他设计..不是（“编辑”/„完成“）我想重命名它或拍照，所以我必须使用一个按钮。

我相应地更新了我的答案，请看一下。

【参考方案1】：

下面的实现将EditButton 的功能替换为Button：

import SwiftUI

struct ContentView: View 

    @State var isEditing = false
    @State var selection = Set<String>()

    var names = ["Karl", "Hans", "Faustao"]

    var body: some View 
        NavigationView 
            VStack 
                List(names, id: \.self, selection: $selection)  name in
                    Text(name)
                
                .navigationBarTitle("Names")
                .environment(\.editMode, .constant(self.isEditing ? EditMode.active : EditMode.inactive)).animation(Animation.spring())
                Button(action: 
                    self.isEditing.toggle()
                ) 
                    Text(isEditing ? "Done" : "Edit")
                        .frame(width: 80, height: 40)
                
                .background(Color.yellow)
            
            .padding(.bottom)
        
    


#if DEBUG
struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    

#endif

结果

但是，通过这样做，选择处理需要由我们自己实现（这可能是也可能不是问题）。

不幸的是，目前没有太多相关文档： https://developer.apple.com/documentation/swiftui/list/3367016-init

【讨论】：

平滑动画可以用这段代码激活 .environment(\.editMode, .constant(self.isEditing ? EditMode.active : EditMode.inactive)).animation(Animation.spring())

太棒了！关于“.animation ...”的好提示。我不知道那件事。我更新了答案以包含此信息。 ?? 请收下：meta.stackexchange.com/a/5235/219412 谢谢。

这很有帮助。几个月来，我遇到了一个问题，即 EditButton 在关闭模式表后会停止工作。它是 EditButton、编辑模式状态以及关闭模式时在屏幕上重绘的顺序的某种组合。我用它替换了编辑模式和按钮，它终于按需要工作了。非常感谢！

在 .environment() 视图修饰符中使用 .constant() 绑定导致我的代码崩溃，请参阅此答案：***.com/a/68938630/1085556

【参考方案2】：

在 Beta 5 中有一个更好的方法可以做到这一点，您可以在其中直接获取 @Environment 绑定（也可以更好地使其成为导航栏项）：

import SwiftUI

struct EditableListView: View 

    @State var items: [String] = ["1", "2", "3"]
    @State var selections: Set<String> = []

    @Environment(\.editMode) private var editMode: Binding<EditMode>

    var body: some View 
        List(items, id: \.self, selection: $selections)  item in
            Text(item)
        
        .navigationBarItems(trailing:
            Button(action: 
                self.editMode?.value.toggle()
            ) 
                Text(self.editMode?.value == .active ? "Done" : "Edit")
            
        )
        .animation(.default)
    


extension EditMode 

    mutating func toggle() 
        self = self == .active ? .inactive : .active
    

【讨论】：

它对我不起作用.. 当我点击按钮然后他什么也不做

作为独奏视图。如果我将它作为第二个视图并打开你的代码作为导航链接，那么它的你的代码很好。谢谢

【参考方案3】：

这是一种在保留EditButton 功能的同时仍能观察变化的方法。

EditButton()
    .simultaneousGesture(TapGesture().onEnded 
        // Do your thing
    )

这适用于您要观察点击的每个视图。

【参考方案4】：

您也可以使用如下的普通按钮：

    .navigationBarItems(trailing: HStack
        Button(action: 
            editMode?.wrappedValue.toggle()
        , label: 
            Text(editButtinTxt)
        )
    )

和正文：

var editBtnTxt : String 
    
    if let isEditing = editMode?.wrappedValue.isEditing 
        return isEditing ? "Done" : "Edit"
    else 
        return ""
    

别忘了

@Environment(\.editMode) var editMode

【参考方案5】：

至于 Xcode 13，似乎有一些更新。我测试以下代码是否有效。

@State var editMode: EditMode = .inactive
@State var isEditing = false

List 
.....
.environment(\.editMode, $editMode)

Button(action: 
isEditing.toggle()
editMode = isEditing ? .active : .inactive
)