I'm trying to create a ScrollView with a background colour inside a NavigationView, and running into some problems. Here's the code:

struct MainView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    ForEach(0..<20) { i in
                        HStack {
                            Spacer()
                            Text("Row \(i)")
                            Spacer()
                        }
                        .padding()
                        .background(Capsule().foregroundColor(.white))
                        .padding()
                    }
                }
            }
            .navigationBarTitle("Main View")
            // Line A:
            .background(Color.blue.edgesIgnoringSafeArea(.all))
        }
    }
}

Notice the line I've marked as 'Line A'. Without this line, the title "Main View" appears as a large title at the top of the screen, then dynamically changes to the smaller, inline version when I scroll down (as expected). However, when I add Line A, this scrolling behaviour no longer works as expected; when I scroll down, the contents of the ScrollView simply slide under the large title, and the large title no longer changes to an inline version.

I've tried using a ZStack as an alternative method of adding the background color, but this results in the same problem.

I'd be hugely grateful if anyone could explain what's going wrong here and/or suggest a solution!

What modifier do you have on line A?

I have the exact problem as you are, exactly today. I have even tried your suggested solution and found the same characteristics as you were. What a coincidence.

A few more not working solution that I've found from the internet is changing the UIScrollView background color appearance modifier through init() like this:

init(){
        UIScrollView.appearance().backgroundColor = UIColor.secondarySystemBackground
    }

But this leaves unwanted problems: This would replace the color of all that is related with UIScrollView, including (extremely weirdly) Text Area. This is bad if your app has a lot of different pages. And personally I don't like using init(): I cannot call init() inside of navigation child view again, so I cannot change the ScrollView background inside the child view.

I'd be hugely grateful if anyone could explain what's going wrong here and/or suggest a solution!

I'd be grateful too!

There's a couple of options here.

If you use the ZStack, make sure you're using .navigationBarTitle("", displayMode: .inline). Do it with the canvas open so you can see the view borders. I found it's more of an art than a science, since order matters with the modifiers. You'll also find that if you add buttons, you'll need to move them into the safe space.

Another modifier you can try is .navigationBarHidden(true). In iOS13, once set, it is applied throughout the app and you need to turn it off in the necessary views. Stackoverflow has multiple articles about this (sorry, don't have the links).

But I don't see that behavior is iOS14 with XCode12, beta 3; it seems to just apply to the view that I hide the navBar. It works in my experiments, but I can't confirm because I've only watched tutorials and haven't pored over the docs.