How to create a segmented control and read values from it

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-a-segmented-control-and-read-values-from-it]

 

How to create a segmented control and read values from it

 

SwiftUI의 Picker는 UIKit의 UISegmentedControl과 동일한 세그먼트 컨트롤을 만드는데 사용될 수 있으며, 특정 상태(state)에 바인딩해야하고 식별될 수 있도록 각 세그먼트에 태그를 제공해야 합니다. 세그먼트(Segments)는 텍스트나 그림이 될 수 있습니다; 다른 것은 조용하게 실패할 것입니다.

 

예제에서처럼, favoriteColor 상태 프로퍼티로 동작하는 세그먼트 컨트롤을 만들고 선택된 값을 보여주는 텍스트 뷰를 아래에 추가합니다.

struct ContentView: View {
    @State private var favoriteColor = 0

    var body: some View {
        VStack {
            Picker(selection: $favoriteColor, label: Text("What is your favorite color?")) {
                Text("Red").tag(0)
                Text("Green").tag(1)
                Text("Blue").tag(2)
            }.pickerStyle(SegmentedPickerStyle())

            Text("Value: \(favoriteColor)")
        }
    }
}

하지만, 이 경우에 다양한 색상을 저장하는 배열을 만드는게 더 좋고, 반복문을 사용해서 내부에서 텍스트 뷰를 만들기 위해 ForEach를 사용합니다.

struct ContentView: View {
    @State private var favoriteColor = 0
    var colors = ["Red", "Green", "Blue"]

    var body: some View {
        VStack {
            Picker(selection: $favoriteColor, label: Text("What is your favorite color?")) {
                ForEach(0..<colors.count) { index in
                    Text(self.colors[index]).tag(index)
                }
            }.pickerStyle(SegmentedPickerStyle())

            Text("Value: \(colors[favoriteColor])")
        }
    }
}