Xcode - Gradient Background Color with List

GuillaumeCombot
August 24, 2021
198 views
1 vote
2 Answers

I don’t understand why i can’t apply my background color. I tried several combinaisons and in several places adding "List" the background color disappears.
Thank you.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .top, endPoint: .bottom)
            List {
                HStack {
                    Text("Boulangerie Roussel")
                            .font(.title3)
                            .foregroundColor(Color.black)
                        Spacer()
                    Text("Ouvert")
                            .font(.title3)
                            .foregroundColor(Color.green)
                            .padding(.horizontal)
                    
                }
            }
        }
    }
}

Answers

You need to clear the background colors first and then you can see the gradient color on your background. And also, put the List or any view you want inside the ‘.overlay()’ after the LinearGradient, like this:

struct ContentView: View {

init() {
    UITableView.appearance().backgroundColor = .clear
    UITableViewCell.appearance().backgroundColor = .clear
}

var body: some View {
    ZStack {
        LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.vertical)
            .overlay(
                List {
                    HStack {
                        Text("Boulangerie Roussel")
                            .font(.title3)
                            .foregroundColor(Color.black)
                        Spacer()
                        Text("Ouvert")
                            .font(.title3)
                            .foregroundColor(Color.green)
                            .padding(.horizontal)
                        
                    }
                }
            )
        }
    }
}

If you want the List Item to change the background color, just put the HStack inside the .overlay() and not the whole List 😉

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

Please signup or login to give your own answer.

Click here to cancel reply.

Xcode – Gradient Background Color with List

Answers