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
– backslash-f, Commented Aug 4, 2019 at 6: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
– Aiiboo, Commented Aug 5, 2019 at 7:19

Joannes · Accepted Answer · 2019-12-25 16:50:59Z

30

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, 2019 at 16:50

Joannes

2,9674 gold badges20 silver badges42 bronze badges

answered Aug 4, 2019 at 6:33

backslash-f

8,2737 gold badges57 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aiiboo Over a year ago

the smooth animation can u active with this code .environment(\.editMode, .constant(self.isEditing ? EditMode.active : EditMode.inactive)).animation(Animation.spring())

backslash-f Over a year ago

Great! Nice tip on ".animation...". I didn't know about that. I updated the answer to include this info. 👍🏻 Please accept it: meta.stackexchange.com/a/5235/219412 Thanks.

radicalappdev Over a year ago

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!

Bart van Kuik Over a year ago

Using the .constant() binding in the .environment() view modifier caused crashes in my code, see this answer: stackoverflow.com/a/68938630/1085556

Valentin · Accepted Answer · 2019-10-10 13:00:31Z

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, 2019 at 13:00

Valentin

3756 silver badges19 bronze badges

Comments

Procrastin8 · Accepted Answer · 2019-08-06 17:53:31Z

7

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

answered Aug 6, 2019 at 17:53

Procrastin8

4,5831 gold badge15 silver badges26 bronze badges

2 Comments

Aiiboo Over a year ago

it does not work for me.. when i click the button then he dont do anything

Aiiboo Over a year ago

as solo View. if i do it as second view and open ur code as navigationlink then its ur code well. Thanks

bfox · Accepted Answer · 2023-08-23 18:16:52Z

6

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, 2023 at 18:16

bfox

2942 silver badges13 bronze badges

answered Nov 7, 2021 at 5:39

luomein

1092 silver badges6 bronze badges

1 Comment

Robin Stewart Over a year ago

Thank you! I was even able to use this method with editMode as an @ObservedObject property in my own controller object outside of SwiftUI.

Osman · Accepted Answer · 2021-08-25 14:32:10Z

1

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

answered Aug 25, 2021 at 14:32

Osman

1,61620 silver badges25 bronze badges

Collectives™ on Stack Overflow

SwiftUI Button as EditButton

5 Answers 5

4 Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related