iOS 16 Swiftui List Background

iOS 16 SwiftUI List Background

iOS 16

Update: Xcode 14b3+

Just use new modifier:

    List {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
    .scrollContentBackground(Color.red)     // << here !!
//    .scrollContentBackground(Color.clear)     // << transparent !!
//    .scrollContentBackground(.hidden)     // << can be combined with above !!

Original

Now they use UICollectionView for backend, so an updated workaround is to change corresponding background colors:

Main part:

extension UICollectionReusableView {
    override open var backgroundColor: UIColor? {
        get { .clear }
        set { }

        // default separators use same color as background
        // so to have it same but new (say red) it can be
        // used as below, otherwise we just need custom separators
        // 
        // set { super.backgroundColor = .red }

    }
}

struct ContentView: View {
    init() {
        UICollectionView.appearance().backgroundColor = .clear
    }
//...

Test module on GitHub

Swift / iOS 16 Empty SwiftUI List Background Color

May not work for everyone but I have a solute for my own problem.

I am using an overlay to present a message when the list is empty so I decided to do the old ZStack trick in here and it seems to work as expected.

Example:

List() {
    ForEach(data, id: \.id) { item in
      // some foreach logic here
    }
}
.background(Color.red)
.scrollContentBackground(.hidden)
.overlay(Group {
    if(data.isEmpty) {
        ZStack() {
            Color.red.ignoresSafeArea()
            Text("Empty List!")
        }
    }
})

Hope this helps somebody else!

How To Change List Color in SwiftUI on iOS 16 with Minimum Deployment of iOS 14

I followed the tutorial referenced above and wanted to provide the code below for anyone with the same question.

import Foundation
import SwiftUI

public struct Backport<Content> {
    public let content: Content
    
    public init(_ content: Content) {
        self.content = content
    }
}

extension View {
    var backport: Backport<Self> { Backport(self) }
}

extension Backport where Content: View {
    @ViewBuilder func scrollContentBackground(_ visibility: Visibility) -> some View {
        if #available(iOS 16, *) {
            content.scrollContentBackground(visibility)
        } else {
            content
        }
    }
}

In use on List

var body: some View {
    UITableView.appearance().backgroundColor = .clear
    UICollectionView.appearance().backgroundColor = .clear
    
    return ZStack {
        
        Color(.blue)
            .edgesIgnoringSafeArea(.all)

        VStack {
            Text("Hello World")
            List {
                Text("Item1")
                Text("Item2")
            } // List
            .listStyle(InsetGroupedListStyle())
            .backport.scrollContentBackground(.hidden)
        } // VStack
    } // ZStack
}

This works perfectly.

Remove background from SwiftUI's List in iOS 16

On iOS 16 you need to use .scrollContentBackground(.hidden) in addition to setting background color:

List {
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
}
.background(Color.blue)
.scrollContentBackground(.hidden)

Prior to iOS 16, there was a few workarounds, the most reliable one was with retrospect (example)

How do I modify the background color of a List in SwiftUI?

Ok, I found the solution for coloring the list rows:

struct TestRow: View {

    var body: some View {
        Text("This is a row!")
        .listRowBackground(Color.green)
    }
}

and then in body:

List {
    TestRow()
    TestRow()
    TestRow()
}

This works as I expect, but I have yet to find out how to then remove the dividing lines between the rows...

SwiftUI List color background

iOS 16

Since Xcode 14 beta 3, You can change the background of all lists and scrollable contents using this modifier:

.scrollContentBackground(.hidden)

You can pass in .hidden to make it transparent. So you can see the color or image underneath.

---

iOS 15 and below

All SwiftUI's Lists are backed by a UITableView (until iOS 16). so you need to change the background color of the tableView. You make it clear so other views will be visible underneath it:

struct ContentView: View {
    
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
        
    var body: some View {
        Form {
            Section(header: Text("First Section")) {
                Text("First cell")
            }
            Section(header: Text("Second Section")) {
                Text("First cell")
            }
        }
        .background(Color.yellow)
    }
}

Now you can use Any background (including all Colors) you want

Note that those top and bottom white areas are the safe areas and you can use the .edgesIgnoringSafeArea() modifier to get rid of them.

Also note that List with the .listStyle(GroupedListStyle()) modifier can be replaced by a simple Form. But keep in mind that SwiftUI controls behave differently depending on their enclosing view.

Also you may want to set the UITableViewCell's background color to clear as well for plain tableviews

iOS 16 View Modifier not consistent across List headers

Set the .listStyle so you have consistency

Because Apple can decide what .listStyle is best, it has changed with every version of SwiftUI for different settings.

If you set it, then it takes your preference not Apple's preference for the circumstance.

The photos you show are .plain for the sidebar and .grouped for the detail.

---

Related Topics