【问题标题】:SwiftUI Button as EditButtonSwiftUI 按钮作为 EditButton
【发布时间】:2019-12-12 03:12:43
【问题描述】:

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

【问题讨论】:

  • 您可能想澄清您的问题。您是指(仅)按钮的标题吗?或者你想知道如何进入List的编辑模式?或两者? (在这种情况下,您可能需要创建一个单独的问题)。另外,到目前为止您尝试过什么?你能分享一些代码吗?
  • 我的意思是两者..我想使用像editbutton这样的按钮激活列表的编辑模式,我知道我可以使用editbutton但我想使用其他设计..不是(“编辑”/„完成“)我想重命名它或拍照,所以我必须使用一个按钮。
  • 我相应地更新了我的答案,请看一下。

标签: swift button swiftui


【解决方案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() 绑定导致我的代码崩溃,请参阅此答案:stackoverflow.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
      })
      

      【讨论】:

        猜你喜欢
        • 2021-02-01
        • 2019-12-28
        • 2021-09-18
        • 1970-01-01
        • 2021-05-02
        • 1970-01-01
        • 2020-04-08
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多