SwiftUI 導航欄顏色

Question

我正在嘗試構建一個主/詳細類型示例應用程序，並且我正在努力讓 NavigationBar UI 在我的詳細視圖中正常工作。 我正在處理的視圖代碼如下：

struct JobDetailView : View {

    var jobDetails: JobDetails

    var body: some View {

            Form {

                Section(header: Text("General")) {
                    HStack {
                        Text("Job Name")
                        Spacer()
                        Text(jobDetails.jobName)
                            .multilineTextAlignment(.trailing)
                    }

                    HStack {
                        Text("Hourly Rate")
                        Spacer()
                        Text(TextFormatters().currencyString(amount: jobDetails.hourlyRateBasic!))
                            .multilineTextAlignment(.trailing)
                    }
                }

            }   .padding(.top)
                .navigationBarTitle(Text(jobDetails.jobName))
    }
}

.padding(.top)的原因是在向上滾動時阻止表單與導航欄重疊。

導航欄上的白色背景部分是我的問題（第一張圖片），我應該期望它與 UI 的整體風格保持一致，我期望發生的事情顯示在第二張圖片中。

我試圖添加前景色/背景色和視圖來改變這種顏色，但無濟於事。 我也不願為 NagivationBar 強制使用顏色，因為這需要進一步配置才能與暗模式一起使用。

運行應用程序時的當前視圖。

預期視圖。

Answer 1

沒有可用的 (SwiftUI) API 來做這件事（還）（測試版 5）。

但我們可以使用UINavigationBar.appearance() ，如：

UINavigationBar.appearance().backgroundColor = .clear

完整代碼

import SwiftUI

struct JobDetailView: View {

    init() {
        UINavigationBar.appearance().backgroundColor = .clear
    }

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("General")) {
                    HStack {
                        Text("Job Name")
                        Spacer()
                        Text("Scientist")
                            .multilineTextAlignment(.trailing)
                    }
                    HStack {
                        Text("Hourly Rate")
                        Spacer()
                        Text("$ 1.00")
                            .multilineTextAlignment(.trailing)
                    }
                }

            }
            .navigationBarTitle("Scientist")
            .navigationBarHidden(false)
        }
    }
}

#if DEBUG
struct JobDetailView_Previews: PreviewProvider {
    static var previews: some View {
        JobDetailView()
    }
}
#endif

結果

暗模式結果

Answer 2

_{您現在不需要為您的問題更改任何內容（因為它是 SwiftUI 的默認行為）。 但是關於你的問題的標題：}

從 iOS 16

您可以使用簡單的原生修飾符將任何顏色設置為內聯狀態的任何工具欄背景顏色（包括導航欄）的背景顏色：

.toolbarBackground(.yellow, in: .navigationBar)