SwiftUI NavigationView background color

Question

I have a ScrollView displaying a list of items in a VStack instead of using a List. I'd like to replicate the behaviour of a .large navigation bar title where the background color uses the .systemGroupedBackground

This is the behaviour of a List that I'd like to have. The background of the Summary is transparent.

This is the behaviour I get when using a ScrollView + VStack. Note the white background of the large navigation bar.

The code to reproduce both is

import SwiftUI

struct MyContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 8) {
                    Text("One")
                        .roundedContainer()
                    Text("Two")
                        .roundedContainer()
                }
                .padding()
            }
            .background(Color(.systemGroupedBackground))
            .navigationBarTitle("Summary", displayMode: .large)
        }
    }
}

struct MyListContentView: View {
    var body: some View {
        NavigationView {
            List{
                Text("One")
                    .padding()
                Text("Two")
                    .padding()
            }
            .listStyle(InsetGroupedListStyle())
            .navigationBarTitle("Summary", displayMode: .large)
        }
    }
}


extension View {
    func roundedContainer() -> some View {
        self
            .frame(maxWidth: .infinity)
            .padding(.vertical)
            .background(Color.white)
            .cornerRadius(10)
    }
}

struct MyContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            MyContentView()
            MyListContentView()
        }
    }
}

Nikolai · Accepted Answer · 2020-11-03T19:12:40.640

1

You could introduce a custom ViewModifier as described here.

Working example:

import SwiftUI

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?

    init(backgroundColor: UIColor?) {
        self.backgroundColor = backgroundColor
    }

    func body(content: Content) -> some View {
        ZStack{
            content
            VStack {
                GeometryReader { geometry in
                    Color(self.backgroundColor ?? .clear)
                        .frame(height: geometry.safeAreaInsets.top)
                        .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
            }
        }
    }
}

extension View {

    func navigationBarColor(_ backgroundColor: UIColor?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor))
    }

}

struct MyContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 8) {
                    Text("One")
                        .roundedContainer()
                    Text("Two")
                        .roundedContainer()
                }
                .padding()
            }
            .background(Color(.systemGroupedBackground))
            .navigationBarTitle("Summary", displayMode: .large)
            .navigationBarColor(.systemGroupedBackground)
        }
    }
}

edited Nov 03 '20 at 19:12

answered Nov 03 '20 at 18:57

Nikolai

659
1
5
10

Wouldn’t that modify the navbar my entire app? – Jan Nov 03 '20 at 18:58
You apply that modification only on a specific view - in your case it's the `ScrollView` within the view `MyContentView` which is modified. Other views are not modified. – Nikolai Nov 03 '20 at 19:01
but the modifier calls `UINavigationBar.appearance()` which is used for any nav bar – Jan Nov 03 '20 at 19:03
Also it does not reproduce the `List` behaviour exactly. You'll note that the List nav bar has a different different color when collapsed and it has a bottom border – Jan Nov 03 '20 at 19:08
You can however neglect the `UINavigationBar.appearance()` part. I've edited the solution above. The `List` is not reproduced, you're right. I was not aware that you address two problems (background of navigation bar and style of list). – Nikolai Nov 03 '20 at 19:15

SwiftUI NavigationView background color

1 Answers1