SwiftUI：如何修改列表中选中图标的特定颜色

你的问题出在所有图标共用了同一个iconColor状态变量，导致点击任何图标时所有图标都会变成红色。要实现仅选中的图标变红，需要跟踪选中的图标，让每个图标根据自身是否被选中来决定颜色。

修改后的代码 #

import SwiftUI

// 遵循Swift命名规范，枚举名首字母大写
enum Icon: String, CaseIterable {
    case gear, bus, questionmark, car, lightbulb
}

struct ContentView: View {
    let iconColumns: [GridItem] = Array(repeating: GridItem(.flexible()), count: 5)
    
    @State private var categoryName: String = ""
    @State private var categorySFIcon: String?
    // 用这个变量记录选中图标的rawValue
    @State private var selectedIcon: String = ""
    
    var body: some View {
        NavigationView {
            VStack {
                Form {
                    TextField("Category Name", text: $categoryName)
                        .textFieldStyle(.roundedBorder)
                    
                    Section {
                        List {
                            LazyVGrid(columns: iconColumns) {
                                ForEach(Icon.allCases, id: \.rawValue) { icon in
                                    Image(systemName: icon.rawValue)
                                        .resizable()
                                        .frame(width: 30, height: 30)
                                        // 每个图标单独判断是否被选中，设置对应颜色
                                        .foregroundColor(selectedIcon == icon.rawValue ? .red : .gray)
                                        .onTapGesture {
                                            categorySFIcon = icon.rawValue
                                            selectedIcon = icon.rawValue
                                        }
                                }
                            }
                        }
                    } header: {
                        Text("Select Icon's Category")
                    }
                    
                    Section("Selected Category") {
                        Text(categorySFIcon ?? "")
                    }
                }
                .navigationTitle("Add Category")
            }
        }
    }
}

struct addCategoryView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键修改点 #

• 移除了全局的iconColor状态，改为通过selectedIcon判断每个图标的颜色
• 在foregroundColor中添加条件判断：当当前图标的rawValue等于selectedIcon时显示红色，否则显示灰色
• 点击图标时，将selectedIcon设置为当前图标的rawValue，确保只有选中的图标变色
• 优化了iconColumns的初始化方式，用Array(repeating:)简化代码
• 修正了枚举名的命名规范（首字母大写）

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