在 Swift UI 中自定义导航栏

Question

我是 swift ui 的新手。我想将图像按钮放在 NavigationBar 标题的一侧。 我希望能够单击用户图像并导航到另一个视图。怎么样？

Answer 1

您需要使用 navigationBarItems 将图像放置到导航栏，并且您应该将 NavigationLink 添加到该图像。对于中心标题，您需要将导航栏标题的 displayMode 设置为 .inline 或者您可以使用新的 Toolbar api

---

struct ContentView: View {
  var body: some View {
    NavigationView {
      Text("Welcome to Stack Overflow")
        .navigationBarTitle("Header", displayMode: .inline)
        .navigationBarItems(leading: NavigationLink(destination: Text("Destination")) {
          Image(systemName: "person.crop.circle.fill")
            .font(.title)
        })
    }
  }
}

---

截图

Answer 2

另一种使用工具栏项的方法。

我在图像图标上添加 TapGesture，并将其排除在 navigation link 之外，因为图像在 NavigationLink 中的 ToolbarItemGroup 内没有变成圆形。

通过利用监控 isActive 状态的 NavigationLink 的 onTap 属性，我们可以确定是否要推送我们的视图。

import SwiftUI

struct WeatherView: View {
    
    @State var onTap = false
    var borderColor: Color = Color("Black")
    
    var addProjectToolbarItem: some ToolbarContent {
        ToolbarItemGroup(placement: .navigationBarLeading) {
            
            NavigationLink(destination:Text("Welcome"), isActive: self.$onTap) {
                EmptyView()
            }
            
            
            Image("yourImage")
                .resizable()
                .frame(width: 32, height: 32)
                .clipShape(Circle())
                .onTapGesture {
                    onTap.toggle()
                }
        }
    }
    
    var body: some View {
        NavigationView {
            VStack {
                Text("First view")
            }
            .toolbar{
                addProjectToolbarItem
            }
            .navigationTitle("Header")
            .navigationBarTitleDisplayMode(.inline)
            
        }
    }
}