SwiftUI中如何根据输入动态切换WiFi强度自定义显示图片

原实现问题 #

原方案通过硬编码字符串匹配+多分支if-else切换自定义图片，存在以下缺陷：

• 裸字符串传参易出现拼写、大小写不匹配问题，导致图标加载失败
• 分支逻辑冗余，定义的CustomWifi4、CustomWifi5资源未被分支引用
• 扩展性差，新增/调整强度等级需要修改多处判断逻辑

参考效果：

优化实现 #

1. 用强类型枚举替代裸字符串传值 #

从根源避免字符串匹配错误，统一管理强度等级和对应图片资源：

enum WifiStrength: String, CaseIterable {
    case none = "custom1"    // 无信号/最低强度
    case low = "custom2"     // 低强度
    case medium = "custom3"  // 中等强度
    case high = "custom4"    // 高强度
    case full = "custom5"    // 满格信号
}

2. 改造ViewModel与视图逻辑 #

移除冗余的if-else分支和重复的图片计算属性，直接通过枚举值加载对应资源：

class ViewModel: ObservableObject {
    // 直接使用枚举类型管理状态，不再用字符串
    @Published var wifiStrength: WifiStrength = .none
}

struct MyConnectionView: View {
    @Binding var currentStrength: WifiStrength
    
    var body: some View {
        // 直接读取枚举关联的图片资源名，不需要分支判断
        Image(currentStrength.rawValue)
            .resizable()
            .scaledToFit()
            // 可按需设置不同强度下的显示样式
            .foregroundStyle(currentStrength == .none ? .secondary : .accentColor)
    }
}

3. 可选：原生SF Symbol无自定义图方案 #

iOS 16及以上系统可直接使用系统自带WiFi符号，无需导入自定义图片，支持按信号数值动态渲染：

// signalValue为0~1区间的信号强度数值，0为无信号，1为满格
Image(systemName: "wifi", variableValue: signalValue)
    .symbolVariant(.fill)
    .font(.title)

4. 真实信号值映射示例 #

如果拿到的是WiFi RSSI原始值（取值范围通常为-100~0，数值越大信号越好），可直接映射到对应强度等级，不需要手动传状态字符串：

func mapRssiToStrength(_ rssi: Int) -> WifiStrength {
    switch rssi {
    case ..<(-80): return .none
    case -80..<(-70): return .low
    case -70..<(-60): return .medium
    case -60..<(-50): return .high
    default: return .full
    }
}

优化收益 #

• 编译期即可检查参数合法性，杜绝字符串拼写错误导致的显示异常
• 代码量减少60%以上，移除所有冗余分支和重复的图片计算属性
• 扩展性强，调整强度等级、替换图片资源只需要修改枚举配置，不需要改动视图逻辑

内容的提问来源于stack exchange，提问作者Steven-Carrot