swiftui - SwiftUI 如何像在 UIKit 中一样为 NavigationBar titleView 设置图像？

Question

我想在 SwiftUI 的 NavigationBar 的 titleView 中设置一个图像，就像我们在 UIKit 中所做的那样

navigationItem.titleView = UIImageView(image: UIImage(named: "logo"))

这就是我们在 UIKit 中的做法。

有人知道怎么做吗？

Answer 1

这是如何做到的：

1. 将SwiftUIX添加到您的项目中。
2. 通过设置您的自定义标题视图View.navigationBarTitleView(_:displayMode:)

示例代码：

struct ContentView: View {
    public var body: some View {
        NavigationView {
            Text("Hello World")
                .navigationBarTitleView(MyView())
        }
    }
}

Answer 2

简单，只需将您的根视图添加到 ZStack 并顶部对齐并在根视图之后添加您的自定义中心视图

struct CenterNavigattionBar: View {
    var body: some View {
        ZStack(alignment: .top){
            //Root view with empty Title
            NavigationView {
                Text("Test Navigation")
                .navigationBarTitle("",displayMode: .inline)
                .navigationBarItems(leading: Text("Cancle"), trailing: Text("Done"))
            }
            //Your Custom Title
            VStack{
                Text("add title and")
                    .font(.headline)
                Text("subtitle here")
                    .font(.subheadline)
            }
        }

    }
}

图像之前

后像

Answer 3

只需使用工具栏。您可以添加任何视图

  import SwiftUI

  struct HomeView: View {

  // MARK: - Initializer
  init() {
      let appearance = UINavigationBar.appearance()
      appearance.isOpaque      = true
      appearance.isTranslucent = false
      appearance.barTintColor  = UIColor(named: "background")
      appearance.shadowImage   = UIImage()
  }


  // MARK: - View
  // MARK: Public
  var body: some View {
      NavigationView {
          VStack(spacing: 20) {
              Text("Hello")
            
              Text("Navigation Bar Test")
          }
          .navigationBarTitleDisplayMode(.inline)
          .navigationBarItems(leading: leadingBarButtonItems, trailing: trailingBarButtonItems)
          .toolbar {
              ToolbarItem(placement: .principal) {
                  VStack {
                      Text("Title").font(.headline)
                      Text("Subtitle").font(.subheadline)
                  }
              }
            
          }
      }
  }

  // MARK: Private
  private var leadingBarButtonItems: some View {
      Button(action: {
        
      }) {
          Text("Left Button")
              .font(.system(size: 12, weight: .medium))
      }
  }

  private var trailingBarButtonItems: some View {
      HStack {
          Button(action: {
            
          }) {
               Text("R1\nButton")
                  .font(.system(size: 12, weight: .medium))
                  .multilineTextAlignment(.center)
          }

          Button(action: {
            
          }) {
              Text("R2\nButton")
                  .font(.system(size: 12, weight: .medium))
                  .multilineTextAlignment(.center)
          }
      }
  }
}

Answer 4

目前，你不能。

有两个 重载，.navigationBarTitle()采用Text视图或符合的类型StringProtocol。您甚至不能传入修改后的视图，例如Text("Title").font(.body). 这将是一个很棒的功能，我会提交一个功能请求： http: //feedbackassistant.apple.com

Answer 5

也许这对你有用？

基本上：GeometryReader用于获取屏幕的宽度NavigationBarItems(leading: HStack {Spacer() Image("name").resizable().frame(width:..., height: ..., alignment: .center Spacer()}.frame(width:geometry.size.width)

示例代码：

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                Text("Hello, world!")
                    .padding()

                    .navigationTitle("test")

                    .navigationBarItems(leading: HStack {
                        Spacer()

                        Image("money")
                            .resizable()
                            .frame(width: 50, height: 50, alignment: .center)

                        Spacer()
                    }
                    .frame(width: geometry.size.width)
                    )
            }
        }
    }
}

Answer 6

尝试这个...

如何在swiftui的NavigationView中放置一个标志？

这显示了如何在 SwiftUI 中处理将图像添加到 NavigationView。希望能帮助到你。