iOS SwiftUI: Correctly stack NavigationView with ScrollView and ZStack?

Question

So I've been playing around with SwiftUI and I can't seem to stack NavigationView correctly with ScrollView and ZStack.

I'm trying to achieve a view with a .black background. Code below:

MainView.swift

var body: some View {
    NavigationView {
        ChildView()
    }
}

ChildView.swift

var body: some View {
    ZStack {
        Color.black.edgesIgnoringSafeArea(.all)
        ScrollView {
            ...
        }
    }
} 

The above code gives me a black background but breaks the navigation bar behaviour.

How it looks:

How it should look:

So it seems like the the navigation doesn't go from the scrollEdgeAppearance to standardAppearance when scrolling.

Any ideas?

Answer 1

Put the ScrollView up as far as possible, otherwise the header animation will not work. The following code does what you want:

struct ChildView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(0..<40) { _ in
                    Text("Hello, World!")
                        .frame(maxWidth: .infinity)
                }
            }
            .background(Color.green.edgesIgnoringSafeArea(.all))
        }
        .navigationBarTitle("Discover")
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            ChildView()
        }
    }
}

To achieve a completely black background, even if you scroll up the bottom, you have to fiddle around in UINavigationController. While there, I also changed the navigation bar colors to achieve your look and feel. Note that this doesn't keep track of whether the user enabled dark mode or not.

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()

        overrideUserInterfaceStyle = .dark

        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = UIColor.black
        appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        
        navigationBar.standardAppearance = appearance
        navigationBar.compactAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance
    }
}