SwiftUI Button as EditButton

Question

How I can use a button like EditButton?
Or how I can use a button to active edit mode from list?
Or how I can change the name from EditButton "edit" / "done"?

You may want to clarify your question. Are you referring (only) to the title of the button? Or do you want to know how to enter the edit mode of a List? Or both? (In that case you may want to create a separate question). Plus what have you tried so far? Can you share some code? — backslash-f, Aug 04 '19 at 06:39
I mean both.. i want active the edit mode for the list with a button like editbutton, I know i can use the editbutton but I want use other designe.. not („edit“/„done“) I want rename this or take a image, so I have to use a button. — Aiiboo, Aug 05 '19 at 07:19

score 26 · Accepted Answer · edited Dec 25 '19 at 16:50

26

The implementation below replaces EditButton's functionality with a 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

Result

However, by doing so, selection handling needs to be implemented by our own (which may or may not be an issue).

Unfortunately there isn't much documentation around that at this point: https://developer.apple.com/documentation/swiftui/list/3367016-init

edited Dec 25 '19 at 16:50

Joannes

2,569
3
17
39

answered Aug 04 '19 at 06:33

backslash-f

7,923
7
52
80

1

the smooth animation can u active with this code .environment(\.editMode, .constant(self.isEditing ? EditMode.active : EditMode.inactive)).animation(Animation.spring()) – Aiiboo Aug 05 '19 at 17:57
Great! Nice tip on ".animation...". I didn't know about that. I updated the answer to include this info. Please accept it: https://meta.stackexchange.com/a/5235/219412 Thanks. – backslash-f Aug 05 '19 at 18:45
4

This is so helpful. I've had an issue for months where an EditButton would stop working after closing a modal sheet. It's some sort of combination of the EditButton, the edit mode state, and the order in which redraw on screen when closing the modal. I replaced the edit mode and button with this and it's finally working as desired. Thanks a ton! – radicalappdev Nov 10 '19 at 15:11
Using the .constant() binding in the .environment() view modifier caused crashes in my code, see this answer: https://stackoverflow.com/a/68938630/1085556 – Bart van Kuik Aug 26 '21 at 14:09

score 13 · Answer 2 · answered Oct 10 '19 at 13:00

13

Here's a way to preserve EditButton's functionality while still observing changes.

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

This works for every view on which you want to observe taps.

answered Oct 10 '19 at 13:00

Valentin

365
6
19

score 7 · Answer 3 · answered Aug 06 '19 at 17:53

There is a better way to do this in Beta 5, where you can grab the @Environment binding directly (also better to make this a navigation bar item):

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
    }
}

it does not work for me.. when i click the button then he dont do anything — Aiiboo, Aug 12 '19 at 06:06
as solo View. if i do it as second view and open ur code as navigationlink then its ur code well. Thanks — Aiiboo, Aug 12 '19 at 06:19

score 3 · Answer 4 · edited Aug 23 '23 at 18:16

3

As for Xcode 13, there seems to be some update. I test the following code works.

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

List {
    // (your list code here)
}.environment(\.editMode, $editMode)

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

edited Aug 23 '23 at 18:16

bfox

274
2
13

answered Nov 07 '21 at 05:39

luomein

51
1
4

Thank you! I was even able to use this method with `editMode` as an @ObservedObject property in my own controller object outside of SwiftUI. – Robin Stewart Jan 21 '22 at 10:18

score 0 · Answer 5 · answered Aug 25 '21 at 14:32

You can also use a normal button like the following :

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

and the text :

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

and don't forget

@Environment(\.editMode) var editMode

SwiftUI Button as EditButton

5 Answers5

Linked