[Swift] Picker 숫자에 간격 주기

명상 앱을 만드는 과정중에 타이머를 만들어야 했다.

Picker를 사용해서 타이머를 만들었는데 분 간격을 5단위로 주고싶었다.

VStack {
    HStack {
        Picker("Hour", selection: $timerViewModel.time.hours) {
            ForEach(0..<24) { hour in
                Text("\(hour)시")
            }
        }

        Picker("Minute", selection: $timerViewModel.time.minutes) {
            ForEach(0..<60) { minute in
                Text("\(minute)분")
            }
    }
}

위의 화면을 만드는 소스코드이다.

여기서 Picker에서 선택한 요소가 무엇인지 어떻게 감지하는가? 하는 궁금증이 생겨서 공식 문서를 살펴보았다.

tag(_:) modifier를 사용하여 이러한 각 콘텐츠 보기에 태그를 추가하여 각 선택 항목의 유형이 바인딩된 상태 변수의 유형과 일치하도록 합니다.

이 말은 무엇이냐 하면
예시에서 selection 파라미터로 넘겨진 $selectionFlavor 값이 tag 값으로 변한다는 소리다!

이제 이 tag 를 사용하여 코드를 고치면

ForEach(0..<12) { minute in
    Text("\(minute * 5)분").tag(minute * 5)
}

ForEach 문에서 0 ~ 60을 0 ~ 12로 바꾸고 minute 을 minute * 5 로 바꾸고 tag modifier를 사용해서 tag(minute * 5) 로 바꾸어주면 5분 단위로 Picker를 동작시킬 수 있다.

5분 단위로 잘 동작하는 것을 볼 수 있다!