SwiftUI导航栏标题navigationTitle
SwiftUI导航栏标题navigationTitle

SwiftUI导航栏标题navigationTitle

navigationTitle 是 SwiftUI 里的一个视图修饰符,专门用来设置当前页面在导航栏(Navigation Bar)里显示的标题。

它只能在 NavigationView 或 NavigationStack 的上下文里生效,因为导航栏本身就是由这些容器提供的。

基本用法

NavigationStack {
    Text("这里是首页内容")
        .navigationTitle("首页")
}

在 iPhone 上,会显示在顶部导航栏。

在 iPad/macOS 上,如果是分栏结构,会显示在当前详情页的导航区域。

特点

1、数据驱动

标题会跟随视图而变化,当 push 到新页面时,显示的就是新页面里 .navigationTitle 的值。

不需要像 UIKit 那样手动设置 self.title。

2、和显示模式配合

可以用 .navigationBarTitleDisplayMode 控制样式:

.navigationBarTitleDisplayMode(.inline)   // 小标题
.navigationBarTitleDisplayMode(.large)    // 大标题(iOS 默认首页效果)

小标题效果:

NavigationStack {
    Text("这里是首页内容")
        .navigationTitle("首页")
        .navigationBarTitleDisplayMode(.inline)
}

大标题只在 iPhone 风格的导航栏里生效,iPad/macOS 通常就是普通标题。

3、与 toolbar 协同

navigationTitle 设置标题,.toolbar 可以往左右两边加按钮。

例如:

.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Button("添加") { ... }
    }
}

常见误区

如果没放在 NavigationStack / NavigationView 里,navigationTitle 什么都不会显示。

在 iPad/macOS 上,NavigationView 可能变成分栏模式,这时标题显示位置和 iPhone 不一样(更像 macOS App 的标题栏)。

在同一层级下,只有最顶层视图的 .navigationTitle 会生效。

总结

navigationTitle 就是“当前页面在导航栏上显示的标题”,它是页面的身份标识,必须放在导航容器里才有意义。

扩展文章

SwiftUI导航栏toolbar标题修饰符navigationBarTitleDisplayMode:https://fangjunyu.com/2025/03/05/swiftui%e5%af%bc%e8%88%aa%e6%a0%8ftoolbar%e6%a0%87%e9%a2%98%e4%bf%ae%e9%a5%b0%e7%ac%a6navigationbartitledisplaymode/

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注