Woman pointing to list

Transparent List In SwiftUI

To make a list transparent in SwiftUI, you need to do the following:

  1. Make the background of the list row clear
  2. Make the style of the list plain

Making the background of the list row clear

You need to pass the Color.clear colour to the listRowBackground modifier of each row in your list:

.listRowBackground(Color.clear)

If you add the above to your code, you will notice that the list is not as transparent as expected. This is because the list style needs to be plain for listRowBackground to have any effect. This is due to the styling options applied to the entire list when using grouped or inset styles.

Setting the list style

To finish off the transparency, we set the listStyle to plain like this:

.listStyle(.plain)

And that is it!

The below code shows a full example with a background image to show the list transparency in effect.

struct ContentView: View {
    var body: some View {
        GeometryReader { _ in
            ZStack {
                Image("beach")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .opacity(0.5)
                List {
                    Text("Some text")
                        .listRowBackground(Color.clear)
                    ForEach((1...20), id: \.self) {_ in
                        Text("Example row")
                            .listRowBackground(Color.clear)
                            .listRowSeparator(.hidden)
                    }
                }
                .listStyle(.plain)
            }
            .ignoresSafeArea()
        }
            
    }
}

As a bonus, I’ve removed the row spearators to create a purely transparent list

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments