SwiftUI03 - Stepper

숫자를 입력하고 변경하기 위해 SwiftUI에서 제공하는 방법은 Stepper와 Slider가 있다. Stepper는 +,- 버튼을 통해 숫자의 크기를 조절하는 방법이고, Slider 는 범위 안의 숫자를 슬라이더 ui를 통해 조절하는 것이다.

❑ Stepper

사용자환경에서 실시간으로 숫자를 변경해야 하는 Stepper를 사용하기 위해서 @State property wrapper를 사용한다.  Stepper를 선언하면 텍스트 옆에 - + 버튼이 생긴다. 버튼을 클릭하면 숫자가 변경된다.

struct ContentView: View {
    @State private var goalCount = 0
    var body: some View {
        Stepper("\(goalCount) Goal", value: $goalCount)
            .padding(.horizontal, 30)
    }
}

❑ Stepper의 옵션

Stepper의 옵션은 여러가지가 있는데 주로 쓰이는 옵션은 in과 step이다. in은 Stepper에서 사용하는 숫자의 범위를 설정하는 것이다. 위의 예시를 보면 골은 음수로 표현할 수 없기 때문에 in 옵션을 0...100 으로 줄 수 있다. step은 버튼을 누를 때마다 변하는 값을 설정하는 것이다. 정수 뿐만 아니라 소수도 사용할 수 있다.

struct ContentView: View {
    @State private var goalCount = 0
    var body: some View {
        Stepper("\(goalCount) Goal", value: $goalCount, in: 0...100, step: 1)
            .padding(.horizontal, 30)
    }
}

코드를 실행해보면 음수로는 내려가지 않는 것을 확인할 수 있다.