How to add button on navigation bar with SwiftUI

user_9761232 0
Viewed 5719

I have two structs ContentView.swift 

struct ContentView: View {
    var body: some View {
        NavigationView{
            ZStack {
                Color(red: 0.09, green: 0.63, blue: 0.52)
                    .edgesIgnoringSafeArea(.all)

                VStack {
                    Image("flower_logo")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 150.0, height: 150.0)
                        .clipShape(Circle())

                    Text("ScanFlower")
                        .font(Font.custom("Pacifico-Regular", size: 40))
                        .bold()
                        .foregroundColor(.white)

                    Text("DETECT FLOWER SPECIES")
                        .foregroundColor(.white)
                        .font(.system(size: 15))

                    Spacer()
                        .frame(height: 100)

                    NavigationLink(destination: ScanWithCamera()){
                        NavigateButtons(imageName: "camera.fill", text: "Scan with camera")
                    }

                    NavigateButtons(imageName: "photo.fill", text: "Use pictures")
                    NavigateButtons(imageName: "chart.bar.fill", text: "Check your database")
                }
            }
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

which moved to second view ScanWithCamera.swift by click on NavigationLink "Scan with Camera". In ScanWithCamera.swift

struct ScanWithCamera: View {
    var body: some View {
        NavigationView{
            Text("Damn...bro...")
                .navigationBarTitle("Page2",displayMode: .inline)
            .navigationBarItems(leading:
                Button(action: {
                    print("Edit button pressed...")
                }) {
                    Text("Edit")
                }
            )
        }

    }
}

struct ScanWithCamera_Previews: PreviewProvider {
    static var previews: some View {
        ScanWithCamera()
    }
}

struct ScanWithCamera_Previews: PreviewProvider {
    static var previews: some View {
        ScanWithCamera()
    }
}

I would like to have a button on Navigation Bar, but I have no idea how to add it there. When I tried to do it with .navigationBarItems, I had navigation bar for almost half of screenenter image description here like on the screen. how to add this button there so that the navigation bar does not increase?

navigationbar swiftui swift uiview ios
3 Answers

You can Use following code

if you want to show edit on place of back ... you can do this 

struct DestinationView: View {
    var body: some View {
        List {
            Text("1")
        }
        .navigationBarTitle("Destination")
        .navigationBarItems(leading:

             Button("Edit") {
               print("About tapped!")
               }
        ).navigationBarBackButtonHidden(true)
    }
}

Result enter image description here

If you want to show back with multiple button example 

struct DestinationView: View {
    var body: some View {
        List {
            Text("1")
            Text("2")
        }
        .navigationBarTitle("DestinationView")
        .navigationBarItems(leading: HStack {
                Button("Back") {
                    print("About tapped!")
                }.background(Color.black)
                    .foregroundColor(Color.white)

                Button("Help") {
                    print("Help tapped!")
                }
                }, trailing:
                HStack {

                    Button("About") {
                        print("About tapped!")
                    }

                    Button("Info") {
                        print("Help tapped!")
                    }
                }
        )

    }
}

Result

enter image description here

If you want .inline and multiple buttons

struct DestinationView: View {
    var body: some View {
        List {
            Text("1")
            Text("2")
        }
        .navigationBarTitle("Destination")
        .navigationBarItems(leading: HStack {
                Button("Back") {
                    print("About tapped!")
                }.background(Color.black)
                    .foregroundColor(Color.white)

                Button("Help") {
                    print("Help tapped!")
                }
                }, trailing:
                VStack {

                    Button("About") {
                        print("About tapped!")
                    }

                    Button("Info") {
                        print("Help tapped!")
                    }.foregroundColor(Color.red)
                }
        )


    }
}

Result enter image description here

user_17806320

Change your location from leading to trailing to put it on the top right of your navigation (where an Edit button would normally go):

    NavigationView{
        Text("Damn...bro...")
            .navigationBarTitle("Page2",displayMode: .inline)
        .navigationBarItems(trailing:
            Button(action: {
                print("Edit button pressed...")
            }) {
                Text("Edit")
            }
        )
    }
user_119734200

In iOS 14+ if you try to use navigationBarButton you'll get a deprecated warning and you'll be asked to use the toolBar here's the example code for the same

NavigationView {
            Text("Hello")
            }.navigationTitle("Home")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button {
                            print("hello")
                        } label: {
                            Image(systemName: "person.crop.circle").imageScale(.large)
                        }
                    }
                }
        }

Here's how the above code will look like, you can change the placement of the ToolBarItem by changing the value of placement

enter image description here

user_36110840
Related