SwiftUI Picker

  • 이번에는 SwiftUI에서 Picker를 어떻게 사용하는지 알아보겠다.
  • Swift 기본 문법을 숙지하고 있다는 가정 하에 작성되었다.

Picker 역할

  • SwiftUI의 Picker 뷰는 기존의 UIPicker 역할을 담당한다.
  • 내부적으로는 UIPicker와 UITableView를 동시에 관리한다고 한다.
  • 중요한것은 SwiftUI 사용자는 그것을 신경 쓸 필요 없이, 사용하면 된다.

Picker 형태

  • 기본적으로 Picker는 다음과 같은 형태이다.
  • selection에는 Binding 변수를, label에는 뷰를, content에는 클로저 형태로 뷰를 리턴하면 된다.
Picker(selection: Binding<_>, label: _, content: () -> _)

Picker 사용법

  • 이렇게 Picker에 예시 값을 넣어보았다.
  • 색상을 선택하는 Picker 예시이다.
  • selection에는 $selectedColor를,
  • label에는 안내하는 텍스트 뷰를,
  • content에는 ForEach문으로 텍스트 뷰를 표시해봤다.
Picker(selection: $selectedColor, label: Text("Choose a color")) {
    ForEach(0 ..< colors.count) {
        Text(self.colors[$0])
    }
}

Picker 전체 코드

  • 다음은 위 예시에 대한 전체 코드이다.
struct ContentView: View {
    var colors = ["Red", "Green", "Blue", "Tartan"]
    @State var selectedColor = 0
    
    var body: some View {
        VStack {
            Picker(selection: $selectedColor, label: Text("Please choose a color")) {
                ForEach(0 ..< colors.count) {
                    Text(self.colors[$0])
                }
            }
            
            Text("You selected \(colors[selectedColor])")
        }
    }
}
  • 다음 코드를 실행하면 다음 사진과 같은 Picker가 나타나게 된다.

swiftui-tutorial-picker

관련 글