[SwiftUI] Picker 선택된 항목 색상 변경하기

Picker를 List 안에서 사용하는데, tint의 값에 바인딩 값을 할당했음에도 불구하고 값의 변경에 따라 유동적으로 변하지 않았다.

 

색상을 Blue로 변경했음에도 .gray색상

 

tint이기 때문에 그 View를 다시 불러오면 제대로 반영이 되지만 실시간이 아니라 새로 그려야 반영이 된다는 점이 아쉬웠다.

 

방법을 찾다가 약간의 트릭을 사용하면 해결할 수 있음을 알게 되었다.

 

원문: https://stackoverflow.com/questions/74157251/why-doesnt-swiftui-pickers-tint-color-update

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

 

결론은 .tint로 .white 값을 주고, .colorMultiply를 사용하면 원하는 결과를 얻을 수 있다.

 

https://developer.apple.com/documentation/swiftui/view/colormultiply(_:)

colorMultiply(_:) | Apple Developer Documentation

 

colorMultiply(_:)에 전달한 색상을 기존 색상에 섞게 되는데, 기본 .tint 값이 .white이기 때문에 어떤 색상이 오든 그 색상을 보여줄 수 있는 것이다.

 

Picker(selection: $selectedRegion) {
    ForEach(Regions.allCases) { region in
        Text(region.rawValue)
    }
} label: {
    Label("관심지역", systemImage: "map")
}
.tint(.white)
.colorMultiply(themeColor.color)

 

 

+ 24. 03. 21. 내용 추가

 

Picker의 label에 있는 이미지의 색상이 좀 더 진하고, 다크모드로 바꾸면 Label의 색이 white가 되면서 multiply의 색으로 변하는 현상이 생겼다.

 

이를 해결하기 위해 또 여러 시도를 해봤지만, 가장 깔끔한 방법은 다음 방법이었다.

HStack {
    Label("관심지역", systemImage: "map")

    Spacer()

    Picker("Region Picker", selection: $selectedRegion) {
        ForEach(Regions.allCases) { region in
            Text(region.rawValue)
        }
    }
    .tint(.white)
    .colorMultiply(themeColor.color)
    .labelsHidden()

 

Picker에 .labelsHidden modifier를 사용하여 Label을 가리고(또는 modifier 없이 titleKey에 ""나 String()을 사용해도 동일) 별도의 Label을 만들어 HStack으로 묶어주면 원하는 모습으로 동작한다.

Preview여서 Label systemImage에 tint가 제대로 들어가지 않았다