如何在 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/