SwiftUI - 如何将NavigationView的标题设置为大标题（或小标题）？

Question

SwiftUI - 如何将NavigationView的标题设置为大标题（或小标题）？

swiftswiftuiuinavigationcontrollerswiftui-navigationview

32

使用SwiftUI如何更改导航栏标题的大小？选择标准或大号标题。

（注：大号标题会在屏幕上占据更多的空间，用户可以通过向下滚动来查看内容。）

- Clément Cardonnel

3个回答

5

iOS 14及以上版本

在导航栈中的根视图上使用修饰符navigationBarTitleDisplayMode(:)。

- Matthew Quiros

1

Xcode 14.0+

最强大的方法是创建一个带有默认值.large的自定义方法。为此，您需要一个View扩展。继续使用navigationBarTitle()修饰符，并与其一起使用您自己的修饰符。如果您不需要默认值，请改用.inline。

import SwiftUI

extension View {        
    func barTitle(_ title: String,
             size: NavigationBarItem.TitleDisplayMode = .large) -> some View {
        self.navigationBarTitle(title, displayMode: size)
    }
}

struct Benchmark: Identifiable, Hashable {
    let id = UUID()
    var name: String
}

在 Xcode 14.0+ 中，有一个名为 NavigationStack 的新实体。 NavigationStack 是一个视图，它显示一个根视图并允许您在根视图上呈现其他视图。

struct OilView: View {
    
    var benchmarks: [Benchmark] = [ .init(name: "WTI"),   .init(name: "Brent"),
                                    .init(name: "Urals"), .init(name: "OPEC") ]
    var body: some View {
        
        NavigationStack {
            
            List(benchmarks) { benchmark in

                NavigationLink(benchmark.name, value: benchmark)
            }
            .navigationDestination(for: Benchmark.self) { crudeOil in

                if crudeOil.name == "WTI" || crudeOil.name == "Brent" {
                    Text("Light and Sweet")
                        .font(.title2)
                        .barTitle(crudeOil.name)    // default `.large` value
                    
                } else if crudeOil.name == "Urals" || crudeOil.name == "OPEC" {
                    Text("Heavy and Sour")
                        .font(.title2)
                        .barTitle(crudeOil.name, size: .inline)
                }
            }
        }
        .navigationBarTitle("Benchmarks", displayMode: .large)
    }
}

- Andy Jazz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Clément Cardonnel · Accepted Answer

SwiftUI（iOS 14+）

NavigationView {
    TopLevelView {
        // […]
    }
    .navigationBarTitleDisplayMode(.inline) // ⬅️ Important part
}

SwiftUI（Xcode 11.3）

SwiftUI的navigationBarTitle修饰符具有一个可选的displayMode属性，您可以将其设置为.inline以用于小标题，或者.large以用于大标题。查看文档

NavigationView {
    TopLevelView {
        // […]
    }
    .navigationBarTitle("Test", displayMode: .inline) // ⬅️ Important part
}

在UIKit中如何实现

自iOS 11以来，UINavigationBar可以以标准和大标题模式显示其标题。

在UIKit中，如果您想在这两种行为之间进行选择，您需要设置视图控制器的navigationItem的largeTitleDisplayMode属性，以决定该特定视图控制器是否应显示大标题。

然后，您需要检查导航控制器的navigationBar的prefersLargeTitle属性。将其设置为true将允许其导航堆栈中的视图控制器显示大标题。相反，将其设置为false将阻止它，覆盖堆栈中各个NavigationItems的首选项。

这将在UIKit中显示一个大标题。

// Set this property to true to allow NavigationItems to display large titles
let navigationController = UINavigationController()
navigationController.navigationBar.prefersLargeTitles = true

/*
 Choose between `always`, `never` and `automatic` to decide
 if this particular view controller should display a large title.
 */
let viewController = UIViewController()
viewController.navigationItem.largeTitleDisplayMode = .always