[SwiftUI] Image의 색상을 변경하는 방법

개발하고자 하는 기능은 위와 같이 Picker에 나타나는 Item이 있을 때,

오른쪽에 색상이 들어간 동그란 원을 표시하는 것이다.

그래서 다음과 같이 코드를 작성했다.

Picker("카테고리", selection: $selectedCategory) {
    ForEach(dummyCategories) { category in
        HStack {
            Text(category.title)
            Image(systemName: "circle.fill")
        }
        .tag(category as Category?)
    }
}

 

그리고 색상을 넣는 방법에 대해 알아내기 위해 다음과 같이 질문했다.

 

[질문]

여기 Image의 색상이 category의 색상이 되도록 하고 싶어.

 

[답변]

카테고리 색상을 원으로 표시하는 부분에 .foregroundColor(category.color)를 추가했습니다.

이렇게 하면 각 카테고리의 원 아이콘이 해당 카테고리의 색상으로 표시됩니다.

[코드]

Picker("카테고리", selection: $selectedCategory) {
    ForEach(dummyCategories) { category in
        HStack {
            Text(category.title)
            Image(systemName: "circle.fill")
            	.foregroundColor(category.color)
        }
        .tag(category as Category?)
    }
}

---

그러나 색상 변경은 반영되지 않았다.

'이 간단한 기능이 안 될 수가 있나?'라는 생각에 질문을 조금씩 바꿔가며 계속 질문했지만 작동되지 않는 답변만을 던졌다.

 

그래서 공식 문서를 방문했더니

foregroundColor는 Deprecated이며

대신 foregroundStyle을 사용하라고 나와있었다.

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

 

 

(근데 18.4 버전까지 적혀있는데 왜 작동이 안 되는 지도 궁금해서 추후에 알아봐야 할 것 같다)

 

따라서 코드를 foregroundStyle로 변경하였다.

---

그럼에도 여전히 색상이 그대로였다.

 

 

그래서 foregroundStyle에 대한 공식문서를 뒤져보았지만 아직까지 내가 원하는 정보를 찾아볼 수 없어서

이것에 대해서는 추후에 글을 작성해야 할 것 같다.

 

그래도 나중을 생각해서 어느 정도의 생각을 정리하자면

 

1. Image.foregroundStyle(Color)를 입력했을 때 기본 View에서는 색상이 맞게 출력된다.

 

2. 하지만 Picker 내부에서 사용되는 아이템에서는 색상이 출력되지 않는다.

-> 코드를 foregroundStyle(Color, Color)로 작성하는 경우에는 된다.

 

3. SF Symbols에서 아이콘의 레이어 개수를 고려하여 색상을 입력하는 것 같은데,

왜 circle.fill에서 단색임에도 색깔이 두 개나 필요한지도 찾아보아야 할 것 같다.

 

따라서 foregroundStyle<S>, foregroundStyle<S1, S2>, foregroundStyle<S1, S2, S3>, renderingMode, SF Symbols를 키워드로 찾아보아야 할 것 같다.

 

---

일단은 foregroundStyle(category.color, category.color)로 작성을 하니

원하는 대로 색상이 표시가 되었다.

 

개발이 우선이니 이것에 대해 깊이 파고드는 것은 미뤄두고 완성부터 시킬 계획이다.

(이외에도 배워야 할 리스트가 많기 때문이다)