使用 SwiftUI 设置导航栏标题字体

Question

这是一个 SwiftUI 问题，而不是 UIKit 问题。:)

我正在尝试使用 SwiftUI 为导航栏标题设置不同的字体。我的怀疑是这还不支持。这是我尝试过的：

var body: some View {
  NavigationView {
    .navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
  }
}

无论我如何处理.font设置，它都不会改变文本。我还尝试设置自定义字体并删除该displayMode属性。

有没有人能够让这个工作？

Answer 1

在 SwiftUI 中，此时我们无法navigationBarTitle直接更改字体，但是您可以像这样更改导航栏的外观，

struct YourView: View {
    init() {
        //Use this if NavigationBarTitle is with Large Font
        UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]

        //Use this if NavigationBarTitle is with displayMode = .inline
        //UINavigationBar.appearance().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
    }
    var body: some View {
        NavigationView {
            Text("Hello World!")
              .navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
            //.navigationBarTitle (Text("Dashboard"), displayMode: .inline)
        }
    }
}

我希望这能帮到您。谢谢！！

Answer 2

在 iOS 14 SwiftUI 中，您可以使用工具栏修饰符自定义视图导航栏标题，将放置类型 .principal 的 ToolbarItem 设置为新的工具栏修饰符。

NavigationView {
    Text("any text")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                VStack {
                    Text("Nav Title")
                      .font(.system(size: 20))
                      .foregroundColor(Color.black)
                }
            }
        }
}

Answer 3

如果您需要为 SF 系列使用新的圆形面，您可以使用此代码段

    let design = UIFontDescriptor.SystemDesign.rounded
    let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .largeTitle)
                                     .withDesign(design)!
    let font = UIFont.init(descriptor: descriptor, size: 48)
    UINavigationBar.appearance().largeTitleTextAttributes = [.font : font]

Answer 4

我不太喜欢修改视图初始化中的内容，但是，我不确定是否有更好的方法。相反，我将其移至 ViewModifier 以使事情更加整洁：

struct SpecialNavBar: ViewModifier {

    init() {
        UINavigationBar.appearance().largeTitleTextAttributes = [.font: UIFont(name: "Georgia-Bold", size: 20)!]
    }

    func body(content: Content) -> some View {
        content
    }

}

extension View {

    func specialNavBar() -> some View {
        self.modifier(SpecialNavBar())
    }

}

然后使用：

struct MyView: View {

    var body: some View {
        NavigationView { 
            content
                .specialNavBar()
        }
    }

}