Scroll Views background colour when placed in a Navigation Stack in SwiftUI

Question

I have two scroll views placed in a NavigationView. I want both the ScrollViews to inherit the colour as mentioned in the onAppear modifier.

However, when I navigate to the second ScrollView and go back to the first ScrollView, the first view inherits the second ScrollView colour.

struct ScrollView1: View {
    var body: some View {
        NavigationView {
            ScrollView {
                NavigationLink(destination: ScrollView2()) {
                    Text("First View").padding()
                }.frame(maxWidth: .infinity)
            }.navigationBarTitle("First")
            .onAppear {
                UIScrollView.appearance().backgroundColor = UIColor.green
            }
        }
    }
}

struct ScrollView2: View {
    var body: some View {
        ScrollView {
            Text("Second View").frame(maxWidth: .infinity)
        }
        .onAppear {
            UIScrollView.appearance().backgroundColor = UIColor.gray
        }
    }
}

Does anyone know how my first ScrollView will always inherit green and second, gray colour?

Adding ScrollView colour by wrapping inside a ZStack will not collapse NavigationBar from large to inline while scrolling.

Is there any other solution to achieve both i.e, preserving the navigationBar bounce behaviour along with ScrollView colour.

pawello2222 · Answer 1 · 2020-07-07T11:05:35.243

-1

First you can remove backgroundColor from UITableView and UIScrollView (you can do this in SceneDelegate, so it will only be executed once):

UITableView.appearance().backgroundColor = UIColor.clear
UIScrollView.appearance().backgroundColor = UIColor.clear

Then use ZStack to add background colours:

struct ScrollView1: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.green
                ScrollView {
                    NavigationLink(destination: ScrollView2()) {
                        Text("First View").padding()
                    }.frame(maxWidth: .infinity)
                }.navigationBarTitle("asdasd")
            }
        }
    }
}

struct ScrollView2: View {
    var body: some View {
        ZStack {
            Color.gray
            ScrollView {
                Text("Second View").frame(maxWidth: .infinity)
            }
        }
    }
}

edited Jul 07 '20 at 11:05

answered Jul 05 '20 at 17:05

pawello2222

46,897
22
145
209

wrapping scroll view in ZStack and adding colour as such ,breaks the navigationBarTitle bounce behaviour. That's why i tried adding Scroll View colour in the onAppear modifier. Help me in case if both can be achieved together. :) – user2580 Jul 05 '20 at 17:13
You can do the same for your `NavigationView`. Just remove the backgroundColor with `UITableView`. I updated my code with this fix. – pawello2222 Jul 05 '20 at 17:16
1

This still does not collapse Navigation Bar from large to inline while scrolling. The colour changes works as expected though. – user2580 Jul 05 '20 at 17:28
pawello is correct, and if you want to handle your navigation bar then use NavigationBarTitle("title", displayMode: automatic) – Reed Jul 06 '20 at 11:29
But wrapping Navigation View in ZStack, as done above ,will not change the Scroll View1 colour to green. Tried this code but it doesn't serve me the solution :( – user2580 Jul 07 '20 at 05:27
1

@BeeEm97 It looks like currently there's no solution to your problem: [How change background color if using NavigationView in SwiftUI?](https://stackoverflow.com/q/56923397/8697793), [Screen Background Color With ScrollView And Navigation Bar SwiftUI](https://stackoverflow.com/q/56923397/8697793). – pawello2222 Jul 07 '20 at 08:21
Yaa..it seems that swiftUI is not perfect yet !..btw..thanks @pawello2222 :D – user2580 Jul 07 '20 at 10:29

Scroll Views background colour when placed in a Navigation Stack in SwiftUI

1 Answers1