SOLVED: Conditionally showing toolbar items when in EditMode

@donovanh HWS+

Feb '24

Hi, I'm banging my head against the wall here trying to get my view to update to only show prev/next buttons when editmode is active:

.toolbar {
        ToolbarItemGroup(placement: .navigationBarLeading) {
            if editMode?.wrappedValue.isEditing == true {
                HStack {
                    Button("Prev day") {
                        changeDay(direction: "prev")
                    }
                    Spacer()
                    Button("Next day") {
                        changeDay(direction: "next")
                    }
                }
            }
        }
    ToolbarItemGroup(placement: .navigationBarTrailing) {
        EditButton()
    }
}

I'm not sure how I should approach this "isEditing" state. I tried making it a computer value, bringing that comparison in to the value, but it still doesn't seem to be able to toggle the display of these values.

Should I be using a custom button instead of EditButton and toggling isEditing myself?

2

@ygeras

Feb '24

Hi! Maybe this workaround will help to solve this challenge.

struct ContentView: View {
    @State private var editActive = false

    @State private var items = [
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5",
        "Item 6",
        "Item 7",
        "Item 8"

    ]

    var body: some View {
        NavigationStack {
            List {
                ForEach(items, id: \.self) { item in
                    Text(item)
                }
                .onDelete { indexSet in
                    items.remove(atOffsets: indexSet)
                    editActive = false
                }
            }
            .toolbar {
                if editActive {
                    ToolbarItemGroup(placement: .topBarLeading) {
                        Button("<< Prev") { }
                        Button("Next >>") { }
                    }
                }

                ToolbarItem(placement: .topBarTrailing) {
                    Button(editActive ? "Done" : "Edit") {
                        editActive.toggle()
                    }
                }
            }
            .environment(\.editMode, .constant(editActive ? EditMode.active : EditMode.inactive))
        }
    }
}

3

@donovanh HWS+

Feb '24

That's a great workaround! Amazing. I imagine there might be some compromise to not using the built-in EditButton() view, but as I was hoping to replace it with an icon anyway this might be the way way to go.

2

@donovanh HWS+

Feb '24

If I could suggest one tweak, I found this made the transition smoother:

withAnimation {
  editActive.toggle()
}

2

	@donovanh HWS+ Feb '24 Hi, I'm banging my head against the wall here trying to get my view to update to only show prev/next buttons when editmode is active: `.toolbar { ToolbarItemGroup(placement: .navigationBarLeading) { if editMode?.wrappedValue.isEditing == true { HStack { Button("Prev day") { changeDay(direction: "prev") } Spacer() Button("Next day") { changeDay(direction: "next") } } } } ToolbarItemGroup(placement: .navigationBarTrailing) { EditButton() } }` I'm not sure how I should approach this "isEditing" state. I tried making it a computer value, bringing that comparison in to the value, but it still doesn't seem to be able to toggle the display of these values. Should I be using a custom button instead of EditButton and toggling isEditing myself? 2
	@ygeras Feb '24 Hi! Maybe this workaround will help to solve this challenge. struct ContentView: View { @State private var editActive = false @State private var items = [ "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8" ] var body: some View { NavigationStack { List { ForEach(items, id: \.self) { item in Text(item) } .onDelete { indexSet in items.remove(atOffsets: indexSet) editActive = false } } .toolbar { if editActive { ToolbarItemGroup(placement: .topBarLeading) { Button("<< Prev") { } Button("Next >>") { } } } ToolbarItem(placement: .topBarTrailing) { Button(editActive ? "Done" : "Edit") { editActive.toggle() } } } .environment(\.editMode, .constant(editActive ? EditMode.active : EditMode.inactive)) } } } 3
	@donovanh HWS+ Feb '24 That's a great workaround! Amazing. I imagine there might be some compromise to not using the built-in `EditButton()` view, but as I was hoping to replace it with an icon anyway this might be the way way to go. 2
	@donovanh HWS+ Feb '24 If I could suggest one tweak, I found this made the transition smoother: `withAnimation { editActive.toggle() }` 2

Reply to this topic…