How do I get an "edit" button for a row in a list/for each loop? [SwiftUI]

Question

I want to get an edit and add a button like the circled buttons shown in the image below. I need these buttons so that I can change the properties of the folders. How do I get this button to work when the default SwiftUI Edit button is clicked?

What I want:

(Before Edit button clicked)

(After Edit Button Clicked)

What I currently have:

(Before Edit button clicked)

(After Edit Button Clicked) My code:

var body: some View {
        ZStack {
            List {
                ForEach(searchResults, id: \.self.id) { dir in
                    Section(dir.title) {
                        ForEach(dir.getChildFolders(), id: \.self.id) { folder in
                            NavigationLink(destination: DirectoryView(directory: folder)) {
                                Label(folder.title, systemImage: "folder")
                            }
                        }
                        .onDelete(perform: { offsets in
                            dir.items.remove(atOffsets: offsets)
                            updateView.update()
                        })
                        .onMove(perform: { source, destination in
                            dir.items.move(fromOffsets: source, toOffset: destination)
                            updateView.update()
                        })
                    }
                }
                
            }

Answer 1

You need to display the button yourself.

First, ensure you have some @State var tracking whether Edit mode is toggled:

@State var editing: Bool = false

Then, in your body, show the circle button next to the NavigationLink if you are editing:

var body: some View {
    ZStack {
        List {
            ForEach(searchResults, id: \.self.id) { dir in
                Section(dir.title) {
                    ForEach(dir.getChildFolders(), id: \.self.id) { folder in
                        HStack {
                            NavigationLink(destination: DirectoryView(directory: folder)) {
                                Label(folder.title, systemImage: "folder")
                            }
                            if editing {
                                Spacer()
                                Button(action: {
                                    // Perform circle button action here
                                }) {
                                    Image(systemName: "ellipsis.circle")
                                }
                            }
                        }
                    }
                    .onDelete(perform: { offsets in
                        dir.items.remove(atOffsets: offsets)
                        updateView.update()
                    })
                    .onMove(perform: { source, destination in
                        dir.items.move(fromOffsets: source, toOffset: destination)
                        updateView.update()
                    })
                }
            }
        }
    }
}