SwiftSwiftUIAppleSnippet
Last updated at 2023-09-04

How to Change SwiftUI List Background

ClickUp
Note
AI Status
Last Edit By
Last edited time
Sep 4, 2023 07:19 AM
Metatag
Slug
how-to-change-swiftui-list-background
Writer
Published
Published
Date
Jun 26, 2023
Category
Swift
SwiftUI
Apple
Snippet
There are some cases when you need to change the standard SwiftUI List background. That background can be a solid color or an image. In this tutorial, you will learn how to change the list background's color or an image.
Depending on your environment, you may need to upgrade your Xcode version. If your environment matches the requirements, congratulations! You are good to go!

Prerequisite

In order to follow this tutorial, you need to use iOS 16 as your application target.
To download the latest Xcode, you can go here.

Quick Solution For Your Convenience

To change SwiftUI List background color, you need to apply .scrollContentBackground(.hidden) and then use the .background() modifier in your List view.
List {
    Text("Content")
}
.scrollContentBackground(.hidden)
.background(Color.red)

Apply .scrollContentBackground modifier to List

iOS 16 has brought new modifier that makes developer easy to change list background. This modifier allows you to hide standard background from List.
In this example, you will hide the standard background color in a chat room.
List {
	Section {
    Text("User chat")
    Text("User chat")
  }
	Section {
    Text("User chat")
    Text("User chat")
  }
	Section {
    Text("User chat")
    Text("User chat")
  }
}
.scrollContentBackground(.hidden)
The modifier allows you to pass Visibility enum with case .hidden, .automatic, and .visible.
  1. .hidden The element may be hidden.
  1. .automatic The element may be visible or hidden depending on the policies of the component accepting the visibility configuration.
  1. .visible The element may be visible.
After you hide the standard background from List, then you can apply any background to the List. You can put solid color, image, or any other view as if you apply custom background to any view.

Apply .background modifier to List

This step is like applying background to any View. You pass a custom View or Shape to the .background modifier.
List {
	Section {
    Text("User chat")
    Text("User chat")
  }
	Section {
    Text("User chat")
    Text("User chat")
  }
	Section {
    Text("User chat")
    Text("User chat")
  }
}
.scrollContentBackground(.hidden)
.background(Color.red)
You can also apply image as List background
List {
	Section {
    Text("User chat")
    Text("User chat")
  }
	Section {
    Text("User chat")
    Text("User chat")
  }
	Section {
    Text("User chat")
    Text("User chat")
  }
}
.scrollContentBackground(.hidden)
.background(Image("autumn"))
That’s it. Now you can change the List background freely.

Conclusion

Changing List background only requires you to hide the standard background from it. You then have the freedom to apply any other background with standard .background modifier to show different background for your List view.
Now that you already knows how to change a List background, why don’t you play with it!
Go change some List background!
 

Discussion (0)

Related Posts