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

Question

“我的”解决方案：

感谢Midhun MP和Mojtaba Hosseini的帮助，我找到了这个解决方案。 它工作正常，但导航栏的半透明效果不再起作用。 所以，如果有人知道如何修复它，请告诉我。

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

我原来的问题：

我想在我的导航栏中插入这样的东西。 因此，如果有人可以帮助我，那就太好了。

我现在的代码

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

以及我的代码看起来如何编译的照片

Answer 1

您可以在导航视图之前添加一个文本。

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

注意：如果您将 go 转到详细信息页面，上述子标签仍将可见。 如果您不想这样，您可以使用普通视图创建自定义 header。

Answer 2

从 iOS14 开始，可以使用.toolbar {...} ：

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

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