How to set the color of unsafe area in a NavigationView

Question

I want the color above the titlebar of NavigationView to remain the same, even when I scroll the list. I've tried using UINavigationBar to set it, but it doesn't work in unsafe area, and tt still turns gray when sliding down.

import SwiftUI

struct ContentView: View {
    init(){
        UINavigationBar.appearance().backgroundColor = UIColor.blue // it doesn't works in unsafe area
    }
    
    var body: some View {
        TabView {
            NavigationView{
                List{
                    ForEach((1...10).reversed(), id: \.self) {
                        Text("list \($0)")
                    }
                }.toolbar(content: {
                    ToolbarItem(placement: .principal, content: {
                        Text("Title Bar")
                            .bold()
                            .frame(maxWidth: .infinity,maxHeight: .infinity, alignment: .center)
                            .background(Color.red) // it doesn't works
                    })})
                    .navigationBarTitleDisplayMode(.inline)
            }.tabItem {
                Image(systemName: "person")
                Text("tag1")
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

the preview

score 1 · Answer 1 · answered Feb 12 '22 at 14:55

I refer to this link https://stackoverflow.com/a/62125578/6845277 to solve this problem.

It feels quite troublesome. I don't know a simple solution yet

import SwiftUI

struct ContentView: View {

    var body: some View {
        TabView {
            NavigationView{
                List{
                    ForEach((1...10).reversed(), id: \.self) {
                        Text("list \($0)")
                    }
                }.toolbar(content: {
                    ToolbarItem(placement: .principal, content: {
                        Text("Title Bar")
                    })})
                    .navigationBarColor(backgroundColor: .blue, titleColor: .white)

                    .navigationBarTitleDisplayMode(.inline)
            }.tabItem {
                Image(systemName: "person")
                Text("tag1")
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?
    var titleColor: UIColor?

    init(backgroundColor: UIColor?, titleColor: UIColor?) {
        self.backgroundColor = backgroundColor
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = backgroundColor
        coloredAppearance.titleTextAttributes = [.foregroundColor: titleColor ?? .white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: titleColor ?? .white]

        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
    }

    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?, titleColor: UIColor?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor, titleColor: titleColor))
    }
}

preview

How to set the color of unsafe area in a NavigationView

1 Answers1