如何在 SwiftUI 的导航栏中添加类似“副标题”的内容？

Question

Thanks to the help of Midhun MP and Mojtaba Hosseini I found this solution. It works ok, but the translucent effect of the navigation bar does not work anymore. So, if anyone knows how to fix it, please let me know.

// UITableView.appearance().backgroundColor = UIColor(named: "CustomTableViewBackgroundColor") // These are all custom color sets
// UITableViewCell.appearance().backgroundColor = UIColor(named: "CustomTableViewCellBackgroundColor")

// For the navigation bar color
UINavigationBar.appearance().backgroundColor = UIColor(named: "CustomNavigationBarBackgroundColor")
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)

return VStack(spacing: 0) {
    // This is the "subheader"
    Text("Test")
        .padding(.top, 9.5)
        .padding(.bottom, 8)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color("CustomNavigationBarBackgroundColor")) // This is also a custom color set
        .font(.footnote)
    // And here is my normal NavigationView
    NavigationView {
        List {
            Text("Hello")
        } .listStyle(GroupedListStyle())

        .navigationBarTitle(Text(""), displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(
            leading:
            Button("Cancel") {
                // self.presentationMode.wrappedValue.dismiss()
            }.padding(.vertical, 5),
            trailing:
            Button("Done") {

            }.padding(.vertical, 5).disabled(true)
        )
    }
}

I want to insert something like this in my navigation bar. So if someone can help me that would be nice.

My code now

NavigationView {
    List {
        Text("Hello")
    } .listStyle(GroupedListStyle())

    .navigationBarTitle(Text(""), displayMode: .inline)
    .navigationBarBackButtonHidden(true)
    .navigationBarItems(
        leading:
        Button("Cancel") {
            self.presentationMode.wrappedValue.dismiss()
        },
        trailing:
        Button("Done") {

        }.disabled(true)
    )
}

And a photo of how my code looks compiled

Answer 1

You can just add a text just before the navigation view.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Sub Header")
            NavigationView {
                List {
                    Text("Hello")
                } .listStyle(GroupedListStyle())

                .navigationBarTitle(Text("Hello There"), displayMode: .inline)

                .navigationBarBackButtonHidden(true)
                .navigationBarItems(
                    leading:
                    Button("Cancel") {
                        //self.presentationMode.wrappedValue.dismiss()
                    },
                    trailing:
                    Button("Done") {

                    }.disabled(true)
                )
            }
        }
    }
}

Note: If you go to detail pages, the above sub-label will be still visible. If you don't want that, You can create a custom header using normal view.

Answer 2

Starting with iOS14 its possible to use .toolbar {...} :

NavigationView {
    Text("Hello, SwiftUI!")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                VStack {
                    Text("Title").font(.headline)
                    Text("Subtitle").font(.subheadline)
                }
            }
        }
}

Credits https://sarunw.com/posts/custom-navigation-bar-title-view-in-swiftui/