🎨

[SwiftUI]Menuのアイコンに色をつける

2024/02/14に公開

Pickerなどのメニューでは、SFSymbolの色は灰色に塗りつぶされてしまいます。

Picker(selection: .constant(0)) {
    Image(systemName: "circle.fill")
        .foregroundStyle(.red)
        .tag(0)
    Image(systemName: "circle.fill")
        .foregroundStyle(.yellow)
        .tag(1)
    Image(systemName: "circle.fill")
        .foregroundStyle(.green)
        .tag(2)
} label: {
    Text("Hello, World")
}.pickerStyle(.menu)

SFSymbolはレンダリングモードの指定ができるので、symbolRenderingMode(.palette)を指定すれば、色のついたアイコンで表示されます。

Picker(selection: .constant(0)) {
    Image(systemName: "circle.fill")
        .symbolRenderingMode(.palette)
        .foregroundStyle(.red)
        .tag(0)
    Image(systemName: "circle.fill")
        .symbolRenderingMode(.palette)
        .foregroundStyle(.yellow)
        .tag(1)
    Image(systemName: "circle.fill")
        .symbolRenderingMode(.palette)
        .foregroundStyle(.green)
        .tag(2)
} label: {
    Text("Hello, World")
}.pickerStyle(.menu)

Discussion