SwiftUI中为数组列表项随机设背景颜色遇编译报错

错误原因 #

• 字符串不能做取模运算：原代码里的$0是分类字符串，%是整数运算符，直接用$0 % colors.count完全不合法，这是最初报错的根源。
• 错误转换Color类型：.background()需要的是Color这类样式值，你把Color转成String完全没必要，反而导致类型不匹配，还让编译器卡壳无法完成类型检查。

修复方案 #

直接通过数组索引来计算对应的背景颜色，下面两种写法都可以：

写法一：遍历数组索引

Section {
    Text("Product List")
        .smartPhoneModifier()
    ScrollView {
        LazyVGrid(columns: gridItemLayout, spacing: 20) {
            // 遍历数组的索引，通过索引获取分类和颜色
            ForEach(categoriesList.indices, id: \.self) { index in
                let category = categoriesList[index]
                // 用索引取模得到颜色数组的合法索引
                let bgColor = colors[index % colors.count]
                
                Text(category)
                    .font(.system(size: 20))
                    .frame(width: 120, height: 130)
                    .background(bgColor) // 直接传入Color实例
                    .cornerRadius(10)
            }
        }
        .padding(.horizontal)
    }
    .frame(maxHeight: 300)
}

写法二：用enumerated()同时拿索引和元素

Section {
    Text("Product List")
        .smartPhoneModifier()
    ScrollView {
        LazyVGrid(columns: gridItemLayout, spacing: 20) {
            // 把数组转成带索引的枚举序列，同时拿到索引和分类字符串
            ForEach(Array(categoriesList.enumerated()), id: \.element) { index, category in
                let bgColor = colors[index % colors.count]
                
                Text(category)
                    .font(.system(size: 20))
                    .frame(width: 120, height: 130)
                    .background(bgColor)
                    .cornerRadius(10)
            }
        }
        .padding(.horizontal)
    }
    .frame(maxHeight: 300)
}

说明 #

• 用索引做取模运算，能保证每次都拿到颜色数组里的合法元素，不会越界。
• 直接传入Color给.background()，类型完全匹配，编译器能快速完成类型检查，不会再出现超时提示。

内容的提问来源于stack exchange，提问作者user21666271