Screen Background Color With ScrollView And Navigation Bar SwiftUI

Question

Im trying to have a colored background while using a scrollview with SwiftUI but this causes the navigation title to no longer collapse. I've tried a number of ways yet this is always an issue.

struct Person : Identifiable{
    var id : Int
    var name : String
}

struct ContentView: View {
    let people = [
        Person(id: 1, name: "Ricky"),
        Person(id: 2, name: "Dani"),
        Person(id: 3, name: "Mark"),
        Person(id: 4, name: "Kailin"),
        Person(id: 5, name: "James"),
        Person(id: 5, name: "Jenna")
    ]

    var body: some View {
        NavigationView{
            ZStack{
                Color.red
                    .edgesIgnoringSafeArea(.all)
                ScrollView{
                    ForEach(people, id: \.id) { person in
                        Text(person.name)
                            .frame(width: 300, height: 400)
                            .background(Color.blue)
                            .padding()
                    }
                }.navigationBarTitle("Home")
            }
        }
    }

    //    init(){
    //        UIView.appearance().backgroundColor = .orange
    //    }
}

Mojtaba Hosseini · Answer 1 · 2019-09-07T17:09:19.577

9

Rearrange your views like this:

var body: some View {
    NavigationView {

        ScrollView {
            ZStack {
                Color.red
                VStack {
                    ForEach(people, id: \.id) { person in
                        Text(person.name)
                            .frame(width: 300, height: 400)
                            .background(Color.blue)
                            .padding()
                    }
                }
            }
        }.navigationBarTitle("Home")
    }

NOTE THAT You can use UINavigationBar.appearance().backgroundColor = .red alongside with another UIColor like Color(UIColor.red) for the background to simulate the transparent large NavigationBar until the direct API for changing the proper colors in SwiftUI arrives.

And NOTE THAT UIColor.red is slightly different with Color.red.

Also NOTE THAT if you want to use a List instead of ScrollView, you should add .listRowInsets(EdgeInsets()) to ZStack to get rid of the extra white space.

edited Sep 07 '19 at 17:09

answered Sep 07 '19 at 16:45

Mojtaba Hosseini

71,072
19
226
225

1

Perfect thanks! The only downside to this is that if you change scrollview to list, the list adds padding creating white space. – Richard Witherspoon Sep 07 '19 at 17:03
Then add `.listRowInsets(EdgeInsets())` to `ZStack`. – Mojtaba Hosseini Sep 07 '19 at 17:07
With this code, the statusbar still remains white, is that correct? – Bart van Kuik Nov 14 '19 at 12:04
Correct, we don’t touch the statusbar color here at all – Mojtaba Hosseini Nov 14 '19 at 12:06
3

also ignoring the edges doesn't work here. So the top and bottom of the scrollview is still white. Which doesn't solve the problem. Not sure why making the background color is so hard in swiftUI – LateNate Feb 29 '20 at 13:13
Is there any way to get the same effect (background on the scroll view without the header bug) with an image as opposed to a color? – Jeremy Jul 03 '20 at 22:58

score 0 · Answer 2 · answered Jul 28 '20 at 15:43

Here is the solution I came up with... this solution also allows you to colour the background cells a different colour to your List Elements. You could do a very similar thing with ScrollView

As mentioned in the comments for the other solution, carrying out that solution with ListView leaves a bunch of whitespace from the cells. (Which is why this is useful)

I thought I would add to this as none of the other solutions worked for me.

struct ListBackgroundColor: ViewModifier {

    let color: UIColor

    func body(content: Content) -> some View {
        content
            .onAppear() {
                UITableView.appearance().backgroundColor = self.color
                //(Optional) Edit colour of cell background
                UITableViewCell.appearance().backgroundColor = self.color
            }
    }
}   

extension View {
    func listBackgroundColor(color: UIColor) -> some View {
        ModifiedContent(content: self, modifier: ListBackgroundColor(color: color))
    }

}

UI Example https://imgur.com/a/TQ9c5Sc

Screen Background Color With ScrollView And Navigation Bar SwiftUI

2 Answers2

Linked