在NavigationTitle下添加副标题

Question

假设我有以下代码：

struct SwiftUIView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello")
                Text("World")
            }
            .navigationTitle("SwiftUI")
        }
    }
}

我想在 SwiftUI 下添加一个较小的字幕。我尝试添加类似

.navigationSubtitle("")

的内容，但它不存在。我还尝试阅读 documentation，它确实提到了

func navigationSubtitle(_ subtitle: Text) -> some View

，但我只是不确定如何将其添加到我的代码中。预先感谢！

Answer 1

您可以使用

ToolbarItem

位置添加

principal

：

struct SwiftUIView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello")
                Text("World")
            }
            // .navigationTitle("SwiftUI") this won't make any changes now
            .toolbar {
                ToolbarItem(placement: .principal) {
                    VStack {
                        Text("title")
                        Text("subtitle")
                    }
                }
            }
        }
    }
}

缺点是它会覆盖导航标题，因此使用

navigationTitle

所做的任何更改都将不可见。

Answer 2

在工具栏中使用

VStack

会导致子视图显示

< Back

作为后退导航按钮，而不是父视图的标题。我最终做的是：

.navigationTitle("Title") // Will not be shown, but will be used for the back button of the child view
.toolbar {
    ToolbarItem(placement: .principal) {
        VStack {
            Text("Real Title").font(.headline)
            Text("Subtitle").font(.subheadline)
        }
    }
}

Answer 3

你可以这样做：

.navigationBarItems(leading:
    VStack(alignment: .leading, spacing: 5) {
        Text("SwiftUI")
            .font(.system(size: 35, weight: .semibold, design: .default))
        Text("Subtitle")
    }
 )

Answer 4

navigationSubtitle 在 iOS 上不可用。仅适用于 macOS 11.0+ Mac Catalyst 14.0+ 平台编码。

Answer 5

我最终做了一些不同的事情：我没有将“SwiftUI”作为导航标题，而是将其与正文的其余部分一起放在 VStack 中，如下所示：

struct SwiftUIView: View {
var body: some View {
    NavigationView {
                VStack {
                    
                    //Header
                    VStack(alignment: .leading, spacing: 5) {
                        Text("SwiftUI")
                            .font(.system(size: 35, weight: .semibold, design: .default))
                        Text("Subtitle")
                    }
                    .padding()
                    .padding(.leading, -110) //I'm still not sure how to give it a leading alignment without hardcoding it
                    Divider()
                    Spacer()
                    
                    //Body
                    VStack {
                        Text("Hello")
                        Text("World")
                    }
                    Spacer()
                    
                    //Navbar title
                }
        }
}}

无论如何，谢谢大家的帮助！