如何使用 SwiftUI 在导航栏上添加按钮 [英] How to add button on navigation bar with SwiftUI

问题描述

我有两个结构 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()
    }
}

点击导航链接用相机扫描"移动到第二个视图 ScanWithCamera.swift.在 ScanWithCamera.swift

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

我想在导航栏上有一个按钮，但我不知道如何在那里添加它.当我尝试使用 .navigationBarItems 执行此操作时，我的导航栏几乎占屏幕的一半 就像在屏幕上一样.如何在那里添加这个按钮，使导航栏不增加?

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?

推荐答案

您可以使用以下代码

如果你想在后面的地方显示编辑......你可以这样做

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

结果

如果你想用多个按钮显示回来

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

    }
}

结果

如果你想要 .inline 和多个按钮

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


    }
}

结果

这篇关于如何使用 SwiftUI 在导航栏上添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！