Why doesn't SwiftUI Picker's tint color update?

656 views Asked by At

I found 2 unexpected (for me) behaviors of Picker in SwiftUI.

  1. The default style for Picker on iOS inside the List view seems to be .menu and it does not take any tint color at all (fair enough). However, forcing style with .pickerStyle(.menu) changes picker's color as expected… almost.
  2. Changing the tint color of the parent's view does not have any effect on this picker.

Do you have any idea why does it happen?

Xcode 14.1 RC, iOS 16.1

struct PickerTintColorTest: View {
    let colors: [Color] = [.purple, .green, .orange]
    var colorList: some View {
        ForEach(colors, id: \.self) { color in
            Text(color.description)
        }
    }
    @State private var selectedColor: Color = .green
    
    var body: some View {
        List {
            Picker("Default style", selection: $selectedColor) { colorList } // <- doesn't have a tint color at all
            Picker("Menu style", selection: $selectedColor) { colorList }
                .pickerStyle(.menu) // <- forcing to .menu style gives picker a tint color BUT it doesn't update
            Button("Action") { } // <- tint as expected, updates as expected
        }
        .tint(selectedColor)
    }
}

Not initial screenshot. It's after changing picker value.

List with 2 pickers and 1 button

1

There are 1 answers

1
zdtorok On

@Ryba Not sure if it's still actual for you but I faced exactly the same problem today and after I posted a question here on SO as well, I figured out a solution. The trick is to set the tint color to .white and then set the desired State binding via the .colorMultiply(_ Color) modifier instead of the .tint(_ Color) modifier.

So:

            Picker(...) {
                ...
            }
            .tint(.white)            // <-- Set the base color to .white
            .colorMultiply(selColor) // <-- Here is the trick

See my detailed answer and code snippet here: https://stackoverflow.com/a/76203813/3469410