Transparent Background for SwiftUI Lists -- Behavior Change in iOS14

Question

I have a SwiftUI List with a background. In iOS 13 I was successful in making the List transparent, so that the background will show through, by setting UITableView attributes in an init(). With iOS 14 the behavior has changed. A code snippet below shows the init settings. I have confirmed that this extracted snippet works as expected (background showing through the list) in iOS 13, but in iOS 14 the populated rows in the List block the background as if the background was white and not clear.

Has anyone else seen this? Is there another way to make the List transparent that will work with both iOS 13 and 14?

struct RecorderList: View {
    init(){
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
        UINavigationBar.appearance().largeTitleTextAttributes = [
            .foregroundColor: UIColor.purple,
            .font: UIFont(name:"Papyrus", size: 40) ?? UIFont.systemFont(ofSize:40)]
    }
    
    var body: some View {
        
        NavigationView {
            ZStack (alignment: .top){
                Image("background")
                    .resizable()
                    .scaledToFit()
                List {
                    Text("One")
                        .font(.title)
                        .background(Color.clear)
                    Text("Two")
                        .font(.title)
                        .background(Color.clear)
                    Text("Three")
                        .font(.title)
                        .background(Color.clear)
                    Text("Four")
                        .font(.title)
                        .background(Color.clear)
                    Text("Five")
                        .font(.title)
                        .background(Color.clear)

                    }
                }
                .navigationBarTitle("Recorders")
            }
        }
}

Deplume

Having the same issue. It seems, UITableViewCell.appearance().backgroundColor = ... has no effect in iOS 14 - which I would call it a bug. Still same behaviour in Simulator iOS 14.5. listRowBackground(..) doesn't work either. – Disastrous

Answer 1

You can use listRowBackground:

var body: some View {
    NavigationView {
        ZStack(alignment: .top) {
            Image("background")
                .resizable()
                .scaledToFit()
            List {
                Group {
                    Text("One")
                    Text("Two")
                    Text("Three")
                    Text("Four")
                    Text("Five")
                }
                .font(.title)
                .listRowBackground(Color.clear)
            }
        }
        .navigationBarTitle("Recorders")
    }
}

Also by putting views in Group you can apply modifiers to each view separately.

Volcanology

Thank you pawello2222 -- this did the trick nicely. Interestingly, though, at first attempt it did not. It worked on my trimmed down sample as with your modification above, but in my actual app, in which the Text views were instantiated inside a NavigationLink block and then inside a ForEach block, simply adding the .listRowBackground on the Text did not work. It did work though after I added a Group block around the single Text view inside the NavigationLink inside the ForEach loop and then put the .listRowBackground() on that Group. Thanks, again! – Deplume

Applying listRowBackground(Color.clear) didn't do the trick. In order to make the cell background and the table view background clear you additionally need to set UITableViewCell.appearance().backgroundColor = .clear and UITableView.appearance().backgroundColor = .clear - then set a list background: .background(myBackColor.edgesIgnoringSafeArea(.all)). – Disastrous

As of Xcode 12.5, this didn't work for me. – Thermometer

Answer 2

The listRowBackgound modifier does not work for me for some reason. What I'm going with for the short term is

.listRowInsets(EdgeInsets()) // hack for ios14
.background(Color.black) // hack for ios14

and then adjusting padding. I hope someone else has a better idea.

Michamichael

This was exactly what I needed, thank you! – Restorative

It seeams that the modifier only works on VStacks. It works for me when I applied it to a VStack inside a List{} – Queridas

.background is iOS 15 – Lowminded

Answer 3

@Zack you don't need to add hack you can simply use below snippet that works for all iOS version

List {
  ForEach(elements, id:\.self) { element in 
  }.listRowBackground(Color.white)
}.scrollContentBackground(.hidden)
 .background(Color.blue)

Underhill