How to customize List background in SwiftUI 4 with scrollContentBackground
List is a powerful and probably the most used component in the world of SwiftUI. List comes with many modifiers and configuration options on its own.
Starting iOS 16 and SwiftUI 4, we have a newly introduced modifier called scrollContentBackground . In this article we will see use of this modifier in an example.
Let’s start with a data structure:
struct DevTechieCourse: Identifiable {
let id = UUID()
let name: String
let desc: String
}Next, we will put together some sample data to work with. BTW these are real courses on DevTechie.com so check them out. 😉
extension DevTechieCourse {
static var sampleData: [DevTechieCourse] {
[
.init(name: "Maps in SwiftUI using MapKit", desc: "In this video course, we will look at maps in SwiftUI. Goal of the course is to learn all there is about Maps in SwiftUI but also to port over advanced map functionality from UIKit's MapKit. We will build various examples to show the use-case of maps, limitations and capabilities."),
.init(name: "Photo Gallery App in SwiftUI 4, iOS 16 & PhotosPicker", desc: "In this course you will learn to build real world example of SwiftUI 4. We will build app called PhotosGallary where we will build a SwiftUI app from scratch in SwiftUI 4. You will also learn to use newly introduced photos picker control which is now available as a natively supported component in SwiftUI, starting iOS 16 and SwiftUI4. "),
.init(name: "What's in in SwiftUI 4: Learn by Building 15 Examples", desc: "n this course we will look at all the major features announced at WWDC22 for SwiftUI 4."),
.init(name: "Complete E-Commerce App in SwiftUI 3, iOS 15 and Apple Pay", desc: "In this course, we will build E-Commerce app from start to finish using SwiftUI 3 and iOS 15. We will also integrate Apple Pay to allow users to purchase items from the app and let Apple take care of the payment processing. "),
.init(name: "Food Recipes App in SwiftUI 3 & iOS 15 with Lottie Animation", desc: "In this video course we will build food recipes app using SwiftUI 3 and iOS 15. We will learn about SwiftUI, Generic based JSON decoding, Lottie Animation while building out this app. You will also learn to break views down into smaller subviews to learn about the support of view composition in SwiftUI. We will be building search bar functionality from scratch while using several newly introduced APIs in iOS 15."),
.init(name: "Build Strava Clone in iOS using MapKit, Realm and UIKit", desc: "In this course we will build a mini Strava clone from scratch. This app will allow you to track user's location using core location along with displaying their location inside a map. You will be building custom controls from scratch while learning about various reusable components. You will learn to build components in code. We will use UIKit, Realm and MapKit to build this app."),
.init(name: "Top Destinations App in SwiftUI w/ Maps & Lottie Animation", desc: "In this video course, you will learn to build out Top Destinations app from start to finish. This course will cover Hero animation by building matchedAnimation like feature from scratch. You will learn to integrate MapKit into SwiftUI apps. You will learn to parse JSON file using generics along with mapping of custom keys to swift objects using CodingKey enumeration.")
]
}
}Next, we will put a simple UI together with NavigationStack, List and VStack:
struct ContentView: View {
@State private var courses = DevTechieCourse.sampleData
var body: some View {
NavigationStack {
List(courses) { course in
VStack(alignment: .leading) {
Text(course.name)
.font(.title)
.foregroundColor(.primary)
Text(course.desc)
.font(.body)
.foregroundColor(.secondary)
}
}
.navigationTitle("DevTechie Courses")
}
}
}Build and run:
Now, if we try to add just the background to the list, it wouldn’t work:
struct ContentView: View {
@State private var courses = DevTechieCourse.sampleData
var body: some View {
NavigationStack {
List(courses) { course in
VStack(alignment: .leading) {
Text(course.name)
.font(.title)
.foregroundColor(.primary)
Text(course.desc)
.font(.body)
.foregroundColor(.secondary)
}
}
.background(.orange)
.navigationTitle("DevTechie Courses")
}
}
}
But if we add .scrollContentBackground(.hidden) to the list, here is what happens:
struct ContentView: View {
@State private var courses = DevTechieCourse.sampleData
var body: some View {
NavigationStack {
List(courses) { course in
VStack(alignment: .leading) {
Text(course.name)
.font(.title)
.foregroundColor(.primary)
Text(course.desc)
.font(.body)
.foregroundColor(.secondary)
}
}
.background(.orange)
.scrollContentBackground(.hidden)
.navigationTitle("DevTechie Courses")
}
}
}Here we are specifying the visibility of the background for scrollable view, in this case our list.
This looks great but if you want to change Color or your list row as well, we can do it by adding listRowBackgroundmodifier inside the list.
struct ContentView: View {
@State private var courses = DevTechieCourse.sampleData
var body: some View {
NavigationStack {
List(courses) { course in
VStack(alignment: .leading) {
Text(course.name)
.font(.title)
.foregroundColor(.primary)
Text(course.desc)
.font(.body)
.foregroundColor(.secondary)
}
.listRowBackground(Color.orange)
}
.background(.orange)
.scrollContentBackground(.hidden)
.navigationTitle("DevTechie Courses")
}
}
}Build and run for one more time.(In light and dark mode)
With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com