CODEWITHSUNDEEP
swiftuiios14
lp1756
lp1756

Reputation: 976

Transparent Background for SwiftUI Lists -- Behavior Change in iOS14

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

Upvotes: 5

Views: 6632

Answers (3)

Alok Singh
Alok Singh

Reputation: 163

@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)

Upvotes: 0

Zack Bartel
Zack Bartel

Reputation: 3713

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.

Upvotes: 3

pawello2222
pawello2222

Reputation: 54586

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.

Upvotes: 10

Related Questions