How to add button on navigation bar with SwiftUI

问题

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 screen like on the screen. how to add this button there so that the navigation bar does not increase?

回答1:

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

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

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

回答2:

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

来源：https://stackoverflow.com/questions/61784128/how-to-add-button-on-navigation-bar-with-swiftui