如何动态调整 SF Symbol 的颜色

上一期中介绍了什么是 SF Symbols，在此基础上，再讲讲iOS 16以上开始支持的 variableValue。

从 iOS 16 开始，UIImage 上增加了一个 variableValue 的属性（swiftUI 里 Image 增加了相同的属性），Double 类型，值的范围为 0-1，可以根据这个值填充不同部分的内容。

例如，以下代码创建了一个扬声器波的符号，其中突出显示了三个条中的 1 个：

let image = UIImage(systemName: "speaker.wave.3", variableValue: 0.1)

当然也不是所有的图标都支持 variableValue，可以通过 SF Symbols 的 macOS 客户端选择可变这一栏来查看所有的可变图标，如果使用了不支持可变的图标，variableValue 的值将无效。

variableValue 的值也可以通过侧边栏来动态调整：

我还写了个 demo，来展示不同的可变图标，大致代码如下，运行之后只需要把想展示的图标名字粘贴在输入框中，即可动态调整 variableValue

import SwiftUI
struct ContentView: View {
    @State private var imageName: String = ""
    @State private var value = 0.0
    var body: some View {
        VStack(spacing: 20) {
            TextField("输入 Image Name", text: $imageName)
                .multilineTextAlignment(.center)
                .autocapitalization(.none)
            Image(systemName: imageName.isEmpty ? "aqi.low" : imageName, variableValue: value)
                .imageScale(.large)
                .font(.system(size: 40, weight: .bold))
                .foregroundColor(.accentColor)
            Slider(value: $value)
        }
        .padding()
    }
}

本文同步自微信公众号 “iOS新知识”