How To Set NavigationView Background Colour in SwiftUI

Question

I'm trying to set the background color of a NavigationView. I'm trying by adding a ZStack using the code below (partly from the SwiftUI tutorial). Yet it's only ever white unless I replace NavigationView... with Spacer()

    var body: some View {
    ZStack
        {
            NavigationView {
                List {
                    Toggle(isOn: $userData.showFavoritesOnly) {
                        Text("Favourites")
                    }
                    ForEach(userData.landmarks) { landmark in
                        if !self.userData.showFavoritesOnly || landmark.isFavorite {
                            NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                                LandmarkRow(landmark: landmark)
                            }
                        }
                    }
                }

                .navigationBarTitle(Text("Landmarks"), displayMode: .large)
            }

    }.background(Color.blue.edgesIgnoringSafeArea(.all))
}

I can set the individual list item color but i want the whole background to show blue

Answer 1

It is same as UINavigationBar. But since there is no direct api yet, you can change it using appearance:

UINavigationBar.appearance().backgroundColor = .orange
UINavigationBar.appearance().tintColor = .green
UINavigationBar.appearance().barTintColor = .yellow
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]
UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]

You should put this somewhere that you sure the compiler reads like inside the init() method.

Note that some of these will not work below Xcode 11 beta 5.

Answer 2

This appears to be the key in making the Navigation View transparent: UITableView.appearance().backgroundColor = .clear

Thanks to: https://izziswift.com/swiftui-list-color-background/ for that snippet.

Here's the code I put together and tested with Xcode 13 Beta targeting iOS 15 Beta: Screenshot ...Also tested with Xcode 13 Beta deploying to iPhone 12 iOS 14.7.

It could work with Xcode 12.x and iOS 14.x (see comments on SwiftUI 3 features you could potentially remove, etc.)

//  NavigationView.swift
//  swiftui.proto2
//
//  Created by Sunil Raman on 12/8/21
//  Updated by Sunil Raman on 18/8/21

import SwiftUI

//Testing gradient backgrounds, etc. (may require Xcode 13)
//Credit: https://sarunw.com/posts/how-to-set-screen-background-color-in-swiftui/
let backgroundGradient = LinearGradient(
    colors: [Color.purple, Color.red],
    startPoint: .top, endPoint: .bottom)

//Build view here!
struct MyCoolListView: View {
    
    //The "magic" happens here
    //Credit: https://izziswift.com/swiftui-list-color-background/
    init() {
        //Appears to be the key to making Navigation View transparent
        UITableView.appearance().backgroundColor = .clear
        //Just for reference, not sure if opacity can be adjusted
        UINavigationBar.appearance().barTintColor = .white
    }
        
    //Our view, of course
    var body: some View {
      
        //Our navigation view
        NavigationView {
            
            //Our list
            List() {
            
                //Testing sections w.r.t. layout purposes, formatting section headers, etc.
                Section(header: Text("Section 1").font(.title2).foregroundColor(.yellow)) {
                    NavigationLink("Text 1", destination: MyCoolListView())
                    NavigationLink("Text 1", destination: MyCoolListView())
                    NavigationLink("Text 1", destination: MyCoolListView())
                }
                
                Section(header: Text("Section 2").font(.title3).fontWeight(.bold)) {
                    NavigationLink("Text 2", destination: MyCoolListView())
                    NavigationLink("Text 2", destination: MyCoolListView())
                    NavigationLink("Text 2", destination: MyCoolListView())
                }
                        
                Section(header: Text("Section 3").font(.title3).fontWeight(.light)) {
                    NavigationLink("Text 3", destination: MyCoolListView())
                    NavigationLink("Text 3", destination: MyCoolListView())
                    NavigationLink("Text 3", destination: MyCoolListView())
                }
                        
                //For reference, you can uncomment this to test
                //.listRowBackground(Color.blue)
                        
           }
           .listStyle(.insetGrouped)
           //This simulates a "material" type effect, hard to apply to Lists even in SwiftUI 3?
           .opacity(0.65)
           //New SwiftUI 3 feature, you can use if #available(iOS 15, *) or something
           //.refreshable {
               //Refresh action here
           //}
           //Can the navigation title be manipulated further? Not sure.
           .navigationTitle(Text("Title"))
           //The awesome background!
           .background(backgroundGradient)
           //This helps with iOS 14.7 
           .ignoresSafeArea()
                                
        } //End NavigationView
        
    } //End some View
    
} //End struct


//Enabling the previewing in Xcode
struct MyCoolListView_Previews: PreviewProvider {
    static var previews: some View {
        if #available(iOS 15.0, *) {
            MyCoolListView()
                .previewInterfaceOrientation(.landscapeLeft)
        } else {
            // Fallback on earlier versions
        }
    }
}

Answer 3

Here is the solution I came up with... this solution also allows you to colour the background cells a different colour to your List Elements.

as ZStack did not work and UIView/UINavigationBar.appearance().backgroundColor would change the colour of the entire visible screen.

I thought I would add to this as none of the other solutions worked for me.

struct ListBackgroundColor: ViewModifier {

    let color: UIColor

    func body(content: Content) -> some View {
        content
            .onAppear() {
                UITableView.appearance().backgroundColor = self.color
                //(Optional) Edit colour of cell background
                UITableViewCell.appearance().backgroundColor = self.color
            }
    }
}   

extension View {
    func listBackgroundColor(color: UIColor) -> some View {
        ModifiedContent(content: self, modifier: ListBackgroundColor(color: color))
    }

}