8

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
    }
}

3 Answers 3

10

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

5
  • 2
    This was a great help, although when I override the backgroundColor getter, I lose my listRowSeparatorTint (As can be seen in your image). Any idea how to get it back?
    – Darren
    Jun 25 at 17:22
  • @Darren, see updated in comments
    – Asperi
    Jun 26 at 11:38
  • Thank you. That's a shame it uses the same as background. When you say about custom separators, do you mean adding an actual line to each row's view?
    – Darren
    Jun 26 at 11:57
  • 1
    Yes, they do the same, actually even worse, because adding SwiftUI line just adds drawing line to context, but Apple adds new UIView for each separator line.
    – Asperi
    Jun 26 at 12:00
  • 2
    The new .scrollContentBackground in beta 3 makes everything work as expected without this workaround and different color separators.
    – Darren
    Jul 7 at 8:55
5

iOS 16 adds a new API, View.scrollContentBackground, to customize background colors for scrollable Views including List. This was added in beta 3 (release notes).

List {
    Text("One")
    Text("Two")
    Text("Three")
}
.scrollContentBackground(.red)

If you'd like to make it clear, you can use Color.clear or .hidden like so:

.scrollContentBackground(.hidden)
0
0

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())
2
  • You actually don't need a modifier to do this, an extension would've been more than enough. 13 hours ago
  • Yes, if you want it to have the same style all over the app. It wasn't the case in mine. 11 hours ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.