36. [SwiftUI] Picker() 피커

나이, 날짜 등을 선택할 때 자주 봤을 피커에 대해 알아보자.

피커에는 다양한 스타일이 존재한다.

.picerkStyle()

차례대로 wheel, menu, segmented 스타일

 

//  Created by Toughie on 2023/04/30.
//

import SwiftUI

struct PickerPrac: View {
    
    @State var selection: String = "18"
    
    var body: some View {
        
        VStack {
            
            HStack {
                Text("Age: ")
                Text("\(selection)")
            }
            .font(.title)
            
            Picker(
                selection: $selection) {
                    ForEach(18..<101) { number in
                        Text("\(number)").tag("\(number)")
                            .foregroundColor(.black)
                    }

                } label: {
                    Text("Pikcer")
                }
            .pickerStyle(.wheel)
            
            .background(Color.cyan.opacity(0.5))
            .cornerRadius(10)
            .font(.headline)
        }
        .padding()
    }
}

 

+ segmented스타일에서 선택했을 때 색을 변경하거나, 글자색을 변경하려면 추가적인 코드가 필요하다.
현재는 SwiftUI 모디파이어로 불가능하기 때문.

선택을 하면 선택된 부분이 푸른색으로, 글자가 흰색으로 변경된다.

아래와 같은 코드를 통해 색상을 변경할 수 있다.

//  Created by Toughie on 2023/04/30.
//

import SwiftUI

struct PickerPrac: View {
    
    @State var selection: String = "Dog"
    
    let animals: [String] = ["Dog", "Cat", "Rabbit"]
    
    //SwiftUI Native가 아님
    init() {
        //모든 segmented selection에 적용됨.
        UISegmentedControl.appearance().selectedSegmentTintColor = UIColor.systemBlue
        
        let attributes: [NSAttributedString.Key: Any] = [
            .foregroundColor : UIColor.white
        ]
        
        //선택되었을 때 foreground색상 변경
        UISegmentedControl.appearance().setTitleTextAttributes(attributes, for: .selected)
    }
    
    var body: some View {
        
        Picker(selection: $selection) {
            ForEach(animals.indices, id: \.self) { index in
                Text("\(animals[index])")
                    .tag(animals[index])
            }
        } label: {
            Text("Picer")
        }
        .pickerStyle(.segmented)
        .background(Color.pink.opacity(0.2))
    }
}