SwiftUI Navigation Bar Items - replace EditButton() with SF Symbol

793 Views Asked by At

When I run this code, I can't EDIT the LIST which doesn't display the DELETE and MOVE UI when the user taps Edit.

My original code with the TEXT works.

Apple EditButton docs - a button that toggles the edit mode environment value.

[Apples docs EditButton1

Perhaps I could get to use EditMode

NavigationView {
    }
        .navigationTitle("Make My Own ✍")
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                HStack {
                    NavigationLink(destination: EditButton()) {
                        Image(systemName: "pencil")
                    }
                    
                    NavigationLink(destination: MakeMyOwnAddView()) {
                        Image(systemName: "plus")
                    }
                }
            }
        }

Apple List Edit Screen Shot

List Screen Shot

Add View Works Screen Shot

Edit Pencil Icon Clicked Screen Shot

Edit Text Clicked Screen Shot

1

There are 1 best solutions below

0
On

I am not too sure what you are trying to ask; it is very vague, thus I will answer many variants of your question.

Change "Edit" to Pencil Icon (While preserving the + icon??)

Yes I believe you would need to change it. The EditButton() environment object creates a button that helps manage any Views depending on the environment(\.edit). You could change it in two ways:

Using a Button with a label of an Image

import SwiftUI

struct TestView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Hello, world!")
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    HStack {
                        Button(action: {}) {
                            Image(systemName: "pencil")
                        }
                        
                        Button(action: {}) {
                            Image(systemName: "plus")
                        }
                    }
                }
            }
        }
    }
}

enter image description here

I would advise putting two buttons next to each other on the right if you can. Try to put one of them on the left side. If the left side is taken up, then move elements into a Menu on the left side, but keep the right toolbar open for the most important action. All other actions can be shoved into the Menu, ranging from importance and buttonRoles, like it being destructive. Note: Taken from Apple's Human Interface Guidelines

Use a NavigationLink

If you mustn't use a Button, wrap elements in a NavigationLink. Of course, the only noticeable difference is that a Button can fire instantaneous code, whereas the NavigationLink pushes to a destination based on criteria.

import SwiftUI

struct TestView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Hello, world!")
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    HStack {
                        NavigationLink(destination: EmptyView()) {
                            Image(systemName: "pencil")
                        }
                        
                        NavigationLink(destination: EmptyView()) {
                            Image(systemName: "plus")
                        }
                    }
                }
            }
        }
    }
}

enter image description here