如何在SwiftUI的NavigationView中添加多个navigationBarTitle标题

你要的Apple News同款双行导航栏可以通过SwiftUI原生ToolbarAPI实现，兼容iOS 14及以上版本，无需引入第三方依赖。

核心实现逻辑 #

系统默认的navigationTitle仅支持单行文本，你可以替换成自定义的ToolbarItem，把placement设为.principal，就能在导航栏中间位置插入任意自定义视图，我们这里用垂直排布的两个Text分别做主标题和日期副标题即可。

完整可运行代码 #

import SwiftUI

struct AppleNewsStyleNavBar: View {
    var body: some View {
        // iOS 16及以上用NavigationStack，iOS14/15替换为NavigationView即可
        NavigationStack {
            List {
                // 此处替换为你的页面实际内容
                Text("新闻内容卡片1")
                Text("新闻内容卡片2")
                Text("新闻内容卡片3")
            }
            .toolbar {
                ToolbarItem(placement: .principal) {
                    VStack(spacing: 3) {
                        // 主标题
                        Text("今日")
                            .font(.headline)
                            .fontWeight(.semibold)
                        // 副标题（日期/其他附加信息）
                        Text(Date(), style: .date)
                            .font(.caption2)
                            .foregroundColor(.secondary)
                    }
                }
            }
        }
    }
}

拓展调整建议 #

• 可以通过修改VStack的spacing属性调整两行标题的间距
• 支持自定义主副标题的字体、字重、颜色，满足不同设计需求
• 如果需要适配iOS13，可以通过UINavigationBar.appearance()设置全局标题视图，或者用UIViewRepresentable封装UIKit的自定义导航项实现

内容的提问来源于stack exchange，提问作者Luke