iOS 16 SwiftUI List Background

user_13278922 0
Viewed 2532

With the new SwiftUI update in iOS 16 List no longer depends on UITableView. So the following snippet we used to set the List background color to .clear is now useless:

UITableView.appearance().backgroundColor = .clear

I saw that someone used introspect to solve the problem, but does anyone know of another maybe cleaner way to achieve the same behavior?

Also note that on macOS, the following works fine (Tested using Xcode 14 beta & macOS Ventura):

extension NSTableView {
    open override func viewDidMoveToWindow() {
        super.viewDidMoveToWindow()
        backgroundColor = NSColor.clear
        enclosingScrollView!.drawsBackground = false
    }
}
ios16 swiftui-list swiftui swift
4 Answers

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:

demo

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

user_122990300

For that purpose, I created a custom identifier that hides this custom scroll background.

struct ListBackgroundModifier: ViewModifier {

    @ViewBuilder
    func body(content: Content) -> some View {
        if #available(iOS 16.0, *) {
            content
                .scrollContentBackground(.hidden)
        } else {
            content
        }
    }
}

Usage:

List {
    ...
}
.modifier(ListBackgroundModifier())
user_62655840

iOS 16 adds a new modifier, scrollContentBackground(Visibility), to customize the background visibility for scrollable views including List.

You can hide the standard system background like so which will reveal the List's background if you provide one:

List {
    Text("One")
    Text("Two")
    Text("Three")
}
.background(Image("MyImage"))
.scrollContentBackground(.hidden)
user_17953560

As of Xcode 14.0.1 RC, the working code is

.scrollContentBackground(.hidden)
.background(.purple)
user_10754660
Related