How to change SwiftUI list background color

In iOS 16, we finally got a native way to change the background color of a list view in SwiftUI.

We can do this with the new view modifier, .scrollContentBackground.

You can customize a list view background in two ways.

You can easily support sarunw.com by checking out this sponsor.

How to change SwiftUI list background color

To change the background color of a list view, you specified ShapeStyle to .scrollContentBackground, Color is one of the shape styles we can use.

In this example, I set list view background color to pink.

List {
    Section {
        Text("Item 1")
    }
    Section {
        Text("Item 2")
        Text("Item 3")
        Text("Item 4")
    }
    Section {
        Text("Item 5")
        Text("Item 6")
        Text("Item 7")
    }
}
.scrollContentBackground(Color.pink)

In the current beta, we can't use other ShapeStyle like LinearGradient.

I have filed a bug report and will update the post once I know it is the intended behavior or a bug.

You can easily support sarunw.com by checking out this sponsor.

How to hide SwiftUI list background

If you want to be creative with a background, you can choose to hide it using .scrollContentBackground(.hidden), and create you background in .background modifier.

Here is an example where we use an image as a background.

List {
    Section {
        Text("Item 1")
    }
    Section {
        Text("Item 2")
        Text("Item 3")
        Text("Item 4")
    }
    Section {
        Text("Item 5")
        Text("Item 6")
        Text("Item 7")
    }
}
.background {
    Image("ventura")
}
.scrollContentBackground(.hidden)

Read more article about SwiftUI, List, iOS 16,

or see all available topic

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron

Buy me a coffee

Tweet

Share

← Home