如何在 SwiftUI 中更改 .navigationBarTitle 字体？

Question

我正在使用带有 Xcode 11 的 SwiftUI，我想用这些代码行更改 NavigationBarTitle 字体：

.navigationBarTitle (Text("Navigation Bar Title"), displayMode: .inline)
    .font(.subheadline)

但什么也没发生。有什么建议或意见吗？

Answer 1

就我而言，上述答案不起作用。 但是下面的代码运行良好。

let appearance = UINavigationBarAppearance()
        
appearance.titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]

Answer 2

在 SwiftUI 5 中 UINavigationBar.appearance().titleTextAttributes 不起作用。您需要使用以下方法之一来更改标题中的字体：

        init () {
            UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia", size: 20)!]
            // OR
            UINavigationBar.appearance().largeTitleTextAttributes = [.font:UIFont.preferredFont(forTextStyle:.text-style)]
        }

.text-style 可以在 UIFont.TextStyle 文档中找到，例如

.caption
.body
.title1
.title2
.title3
etc

更新 1（回答有关 cmets 中确切代码的问题）

struct ContentView: View {

    init () {
        let paragraph = NSMutableParagraphStyle()
        paragraph.alignment = .center
        
        UINavigationBar.appearance().largeTitleTextAttributes = [.font:UIFont.preferredFont(forTextStyle:.title2),
                                                                 .foregroundColor:UIColor.systemBlue,
                                                                 .paragraphStyle: paragraph
                                                                ]

...

然后在体内我有这个。您可能应该注意 displayMode 参数

// Body is in the same ContentView struct. Settings from init will be used in navigationBarTitle
// listView() is just a custom function returning a SwiftUI's List()

var body: some View {


        NavigationView {
            
        listView()
            .navigationBarTitle(
                Text(self.accts.selCount <= 0 ? "Accounts" : "\(self.accts.selCount) selected")
                ,
                displayMode:.large)

Answer 3

我认为你必须创建一个 NavigationBarBuilder。

struct NavigationBarBuilder: UIViewControllerRepresentable {

    var build: (UINavigationController) -> Void = { _ in }

    func makeUIViewController(context: UIViewControllerRepresentableContext<NavigationBarBuilder>) -> UIViewController {

        UIViewController()
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationBarBuilder>) {

        if let navigationController = uiViewController.navigationController{
            self.build(navigationController)
        }
    }
}

您可以在内容视图中使用它。

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("")
                .navigationBarTitle("Türkiye", displayMode: .inline)
                .background(NavigationBarBuilder {navigationController in
                    navigationController.navigationBar.barTintColor = .red
                    navigationController.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
                })
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

祝你好运……

Answer 4

在 SwiftUI 中，此时我们不能直接更改 navigationBarTitle 字体，但可以像这样更改 navigationBar 外观，

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("TEST")
            .navigationBarTitle (Text("TEST"), displayMode: .inline)
        }
    }
}

希望对你有所帮助。谢谢！！

Answer 5

您不能使用.font 修饰符改变navigationBarTitle 的字体（在 Xcode 11-Beta2 中测试）。

但是您可以构建自己的自定义 navigationBarView，并可以完全访问其任何子视图，如下所示：

struct NavigationBarView: View {

    var body: some View {

        VStack(spacing: 0) {
            Rectangle()
                .foregroundColor(Style.Color.navigationBarColor)
                .edgesIgnoringSafeArea(.top)
                .frame(height: 0)

            Rectangle()
                .foregroundColor(Style.Color.navigationBarColor)
                .frame(height: 64)
            .overlay(
                HStack() {
                    Image("close")
                    Spacer()

                    Text("سفر به سلامت")
                        .font(Style.Font.navigationTitle)
                        .color(Style.Color.darkTextColor)
                        .multilineTextAlignment(.center)

                    Spacer()
                    Image("menu")
                }
            )

            Spacer()
        }
        .edgesIgnoringSafeArea(.horizontal)
    }
}

请注意，使用此实现，您将丢失 LargeTitleStyle。