SwiftUI中如何实现多值参数控制组件颜色切换？

Hey there! 针对你这个多颜色切换的需求，其实有几种很优雅的实现方式，我给你整理一下：

这是最直观的实现方式，把颜色判断逻辑封装成组件内部的计算属性，代码可读性拉满：

struct Component: View {
    let colorValue: String
    
    // 根据传入的字符串返回对应颜色
    private var displayColor: Color {
        switch colorValue {
        case "1":
            return .red
        case "2":
            return .green
        case "3":
            return .blue
        default:
            // 处理未匹配的非法输入，这里默认返回灰色，你可以改成自己需要的颜色
            return .gray
        }
    }
    
    var body: some View {
        Rectangle()
            .fill(displayColor)
            // 可以根据需求添加尺寸等样式
            .frame(width: 100, height: 100)
    }
}

// 调用示例
Component(colorValue: "1") // 显示红色矩形
Component(colorValue: "2") // 显示绿色矩形
Component(colorValue: "3") // 显示蓝色矩形

如果后续需要新增更多颜色选项，用字典映射会更简洁，维护起来也更方便：

struct Component: View {
    let colorValue: String
    
    // 提前定义字符串到颜色的映射关系
    private let colorMap: [String: Color] = [
        "1": .red,
        "2": .green,
        "3": .blue
    ]
    
    private var displayColor: Color {
        // 从字典中取值，找不到就返回默认灰色
        colorMap[colorValue] ?? .gray
    }
    
    var body: some View {
        Rectangle()
            .fill(displayColor)
            .frame(width: 100, height: 100)
    }
}

其实更推荐你用枚举来约束传入的参数，这样能从根源上避免传入无效的字符串（比如"4"这种未定义的值），让代码更安全、可读性更强：

// 先定义一个枚举，把字符串和对应的颜色绑定
enum ComponentColor: String {
    case red = "1"
    case green = "2"
    case blue = "3"
    
    // 枚举自带的计算属性，返回对应的Color值
    var uiColor: Color {
        switch self {
        case .red:
            return .red
        case .green:
            return .green
        case .blue:
            return .blue
        }
    }
}

struct Component: View {
    // 现在参数直接用枚举类型，不用再传字符串了
    let color: ComponentColor
    
    var body: some View {
        Rectangle()
            .fill(color.uiColor)
            .frame(width: 100, height: 100)
    }
}

// 调用示例（更直观，不会传错）
Component(color: .red)   // 对应原"1"
Component(color: .green) // 对应原"2"
Component(color: .blue)  // 对应原"3"

这样不管是现在维护还是后续扩展，都省心很多～

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