SwiftUI -如何将NavigationView的标题设置为大标题(或小标题)?

insrf1ej  于 2023-01-29  发布在  Swift
关注(0)|答案(3)|浏览(352)

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

abithluo

abithluo1#

快速用户界面(Xcode 11.3)

SwiftUI navigationBarTitle修饰符有一个可选的displayMode属性,您可以将其设置为.inline(适用于小标题)和.large(适用于大标题)。See documentation

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

如何在UIKit中完成

从iOS 11开始,UINavigationBar可以在标准和大标题模式下显示其标题。
UIKit上,如果你想在两个行为之间做出选择,你必须设置你的ViewController的navigationItemlargeTitleDisplayMode属性来决定这个特定的视图控制器是否应该显示一个大标题。
然后,您需要检查导航控制器navigationBarprefersLargeTitle属性。将其设置为true将允许其导航堆栈中的ViewControllers显示大标题。相反,将其设置为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
vxbzzdmp

vxbzzdmp2#

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)
    }
}

e7arh2l6

e7arh2l63#

适用于iOS 14及更高版本

在导航堆栈中的根视图上使用修改器navigationBarTitleDisplayMode(:)

相关问题