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

【问题标题】：How to add button on navigation bar with SwiftUI如何使用 SwiftUI 在导航栏上添加按钮
【发布时间】：2020-05-13 20:22:13
【问题描述】：

我有两个结构 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“使用相机扫描”移动到第二个视图 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 进行操作时，我几乎有一半的屏幕导航栏就像在屏幕上一样。如何在此处添加此按钮，使导航栏不增加？

【问题讨论】：

.navigationBarItems 是正确的方法。尝试分享您用于该方法的代码、渲染的内容以及您不喜欢的地方。您应该使用 HStack {} 作为leadingItems 中的元素。这很可能是缺少的东西
@drootang 我编辑了帖子，你能看一下吗？我还添加了图片
@newbieHere 你的问题解决了吗？

标签： ios swift uiview swiftui navigationbar

【解决方案1】：

您可以使用以下代码

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

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


    }
}

结果

【讨论】：

【解决方案2】：

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

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

【讨论】：