在表格的某些单元格中应用颜色答案

【问题标题】：Apply color in some cells in a table在表格的某些单元格中应用颜色
【发布时间】：2021-08-12 13:36:37
【问题描述】：

作为 swiftUI 的新手，我正在寻找一种能够在表格的某些单元格中应用颜色的方法。例如对于“类型”类别，红色表示“系留”，绿色表示“未系留”等...... 我成功地将值放入“ForEach”中，但另一方面我无法在那里整合文本。当我设法应用文本时，单元格颜色不适用。如果我能得到你的知情意见，我是一个接受者。谢谢。

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)

【问题讨论】：

看起来您粘贴的不是完整的视图代码，至少我没有看到您尝试根据类型设置任何颜色的代码

标签： ios gridview swiftui lazyvgrid

【解决方案1】：

您可以添加一个返回颜色的函数，并使用修饰符 .foregroundColor() 应用该颜色。如果您不想更改文本颜色而是更改背景颜色，请改用 .background() 修饰符。

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

【讨论】：

【解决方案2】：

您应该改用List，并使用listRowBackground(_:) 设置行背景。

代码（仅相关部分，其余在您的问题中）：

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

结果：

【讨论】：