将按钮添加到NavigationBarTitle Swift ui

Question

我正在使用快速ui。我想在NavigationBar标题的侧面放一个按钮。

我希望能够单击用户图像并导航到另一个视图

可以做到吗？

Answer 1

使用.navigationBarItems()将按钮放置在导航栏中。任何视图都可以在Button内部使用，因此可以像这样声明一个按钮，就像图像中的按钮一样：

var body: some View {
    NavigationView {

        // the rest of your UI components

        .navigationBarTitle("Browse")
        .navigationBarItems(trailing: Button(action: {}) {
                                VStack {
                                    Spacer()
                                    Image("name")
                                        .resizable()
                                        .frame(width: 45, height: 45)
                                        .clipShape(Circle())
                                }
                            })
    }
}

请注意，它的对齐方式稍有不同（绘制的位置将比示例高一些）。

Answer 2

尝试

NavigationView{
    .navigationBarTitle("Browse")
    .navigationBarItems(trailing:
        Button(action: { // Move to next View }){
            Image()
        }
    )
}

Answer 3

这应该可以解决偏移量的问题，但是它很hacky。也许比这更好的解决您的问题。但是，如果您对这个答案还满意，请给我LuLuGaGa一个赞，因为我从他那里得到了很多帮助。而且我自己没有想到这个答案，但是我不记得我在哪里找到了原始答案。

NavigationView {

    // the rest of your UI components

    .navigationBarTitle("") // To hide the real navigationBarTitle
    .navigationBarItems(leading:
        Text("Browse").font(.largeTitle).bold().padding(.top, 10), // To add a fake navigationBarTitle
        trailing: Button(action: {}) {
            VStack {
                Spacer()
                Image("swiftui")
                    .resizable()
                    .frame(width: 45, height: 45)
                    .clipShape(Circle())
            }
        } .buttonStyle(PlainButtonStyle()) // You should also add that to your code otherwise the picture will turn blue
    )
}

Answer 4

var body: some View {
NavigationView {
    Text("SwiftUI")
        .navigationBarTitle("Welcome")
        .navigationBarItems(trailing:
            Button("Bar button") {
                print("Bar button!")
            }
        )
}