Apply color in some cells in a table

Question

being new to swiftUI I am looking for a method to be able to apply a color in some cells of my table. For example for the category "Types", Red for "Tethered", Green for "Untethered" etc ... I succeeded by putting values in "ForEach" but on the other hand I can not integrate text there. And when I manage to apply the text, the cell colors don't apply. If I could have your informed opinions, I am a taker. Thank you.

struct Jailbreak: Identifiable {
    let id = UUID()
    let noms: String
    let types: String
    let plateformes: String
    
}
struct AnnuaireView: View {
    
    var JailbreakList = [
    Jailbreak(noms: "Unc0ver", types: "Semi-Untethered", plateformes: "iOS/iPadOS"),
    Jailbreak(noms: "Pangu9", types: "Untethered", plateformes: "iOS/tvOS")
    ]
    
    let gridItems = [
        GridItem(.flexible(), spacing: 3.0, alignment: .center),
        GridItem(.flexible(), spacing: 3.0, alignment: .center),
        GridItem(.flexible(), spacing: 3.0, alignment: .center),
        ]
    
    var body: some View {
        VStack {
            HStack {
                Text("Liste des Jailbreaks")
                    .font(.title)
                    .foregroundColor(Color.pink)
            }
                ScrollView(.vertical) {
                        LazyVGrid(columns: gridItems, alignment: .center, spacing: 10) {
                                ForEach(JailbreakList){ Jailbreak in
                                        Text(Jailbreak.noms)
                                        Text(Jailbreak.types)
                                         .multilineTextAlignment(.center)
                                    Text(Jailbreak.plateformes)

looks like you have pasted not full code of your view, at least I don't see code where you're trying to set any color depending on a type — Phil Dukhov, Aug 12 '21 at 13:41

score 0 · Answer 1 · answered Aug 12 '21 at 13:53

You should use a List instead, and setting the row background with listRowBackground(_:).

Code (only relevant part, rest is in your question):

VStack {
    HStack {
        Text("Liste des Jailbreaks")
            .font(.title)
            .foregroundColor(Color.pink)
    }

    List {
        ForEach(JailbreakList) { jailbreak in
            HStack {
                Text(jailbreak.noms)
                    .frame(maxWidth: .infinity)

                Text(jailbreak.types)
                    .multilineTextAlignment(.center)
                    .frame(maxWidth: .infinity)

                Text(jailbreak.plateformes)
                    .frame(maxWidth: .infinity)
            }
            .listRowBackground(jailbreak.types == "Untethered" ? Color.green : Color.red)
        }
    }
}

Result:

score 0 · Accepted Answer · answered Aug 12 '21 at 13:56

You can add a function that returns a color and apply that color with the modifier .foregroundColor(). If you don't want to change the text color but the background color instead use the .background() modifier instead.

    struct AnnuaireView: View {
    
    var JailbreakList = [
        Jailbreak(noms: "Unc0ver", types: "Semi-Untethered", plateformes: "iOS/iPadOS"),
        Jailbreak(noms: "Pangu9", types: "Untethered", plateformes: "iOS/tvOS")
    ]
    
    let gridItems = [
        GridItem(.flexible(), spacing: 3.0, alignment: .center),
        GridItem(.flexible(), spacing: 3.0, alignment: .center),
        GridItem(.flexible(), spacing: 3.0, alignment: .center),
    ]
    
    var body: some View {
        VStack {
            HStack {
                Text("Liste des Jailbreaks")
                    .font(.title)
                    .foregroundColor(Color.pink)
            }
            ScrollView(.vertical) {
                LazyVGrid(columns: gridItems, alignment: .center, spacing: 10) {
                    ForEach(JailbreakList){ Jailbreak in
                        Text(Jailbreak.noms)
                        Text(Jailbreak.types)
                            .multilineTextAlignment(.center)
                            .foregroundColor(getColor(for: Jailbreak))
                        Text(Jailbreak.plateformes)
                    }
                }
            }
        }
    }
    
    private func getColor(for jailbreak: Jailbreak) -> Color {
        switch jailbreak.types {
        case "Untethered":
            return Color.red
        case "Semi-Untethered":
            return Color.orange
        case "Tethered":
            return Color.green
        default:
            return Color.black
        }
    }
}

Apply color in some cells in a table

2 Answers2