SwiftUI Navigation Bar Colour

Question

I am trying to build a master/detail type sample application and I'm struggling to get the NavigationBar UI to work correctly in my detail view. The code for the view I am working on is as follows:

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

The reason for the .padding(.top) is to stop the Form overlapping the navigation bar when scrolling upwards.

The white background on the navigation bar portion my issue (first image), I should expect it to be in keeping with the overall style of the UI, what I expect to happen is shown in the second image.

I have tried to add foreground/background colours and Views to change this colour, but to no avail. I'm also reticent of forcing a colour for the NagivationBar, as this will require further configuration for use with dark mode.

Current view when running application.

Expected view.

Solution

There's no available (SwiftUI) API for doing that (yet) (beta 5).

But we could use UINavigationBar.appearance(), as in:

UINavigationBar.appearance().backgroundColor = .clear

Full Code

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

Result

Dark Mode Result

Comments

[James Woodcock]

Thanks very much, that's exactly what I was looking for.

[iSpain17]

Did not work for me when I added a background to the View inside NavigationView.

[FontFamily]

This works but it changes it for the entire app. @iSpain17 make sure you put it in the first view that loads.

[MrinmoyMk]

Is there any way to change the background in other part of swiftUi view instead of init()