SwiftUI: Gradient background on List

Question

Can someone tell me how to add a gradient background on SwiftUI List?

Current code:

struct TestView: View {
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [Color.red, Color.purple]), startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.vertical)
            .overlay(
                List {
                    Group {
                        Text("Hallo")
                        Text("World")
                    }
                    .background(Color.blue)
                }
                .background(Color.green)
                .padding(50)
        )
    }
}

Current layout, where the gradient is visible behind the cells. I want to make the cells transparent to see the gradient underneath.

Thanks!

Answer 1

You have already added the gradient. Just make background colors clear and get rid of those test codes ;)

iOS 16

You can hide the background of any scrollable content using scrollContentBackground(.hidden) modifier

iOS 15 and below

You should hide the default list background and all cell's using the appearance property of the UITableView and UITableViewCell

Also you can hide the cell background using .listRowBackground(.clear)

Example

struct TestView: View {

    init() {
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [Color.red, Color.purple]), startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.vertical)
            .overlay(
                List {
                    Group {
                        Text("Hallo")
                        Text("World")
                    }
                }
                .padding(50)
        )
    }