如何使用 SwiftUI 在导航栏上添加按钮

Question

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

通过单击 NavigationLink "Scan with Camera" 移动到第二个视图 ScanWithCamera.swift。在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 进行操作时，我有几乎一半屏幕的导航栏就像在屏幕上一样。如何在此处添加此按钮以使导航栏不增加？

Answer 1

将您的位置从 leading 更改为 trailing 以将其放在导航的右上角（“编辑”按钮通常所在的位置）：

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

Answer 2

您可以使用以下代码

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

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

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

结果

如果你想用多个按钮返回示例

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 和多个按钮

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 在导航栏上添加按钮

How to add button on navigation bar with SwiftUI

ios

swift

uiview

swiftui

navigationbar