CODEWITHSUNDEEP
iosswiftswiftui
PAK
PAK

Reputation: 441

SwiftUI: Gradient background on List

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.

enter image description here

Thanks!

Upvotes: 12

Views: 9743

Answers (1)

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 120130

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

Upvotes: 18

Related Questions