skip to Main Content

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.

Code + Canvas

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

2

Answers


  1. 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 😉

    Login or Signup to reply.
  2. 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)
            )
        }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search