SwiftUI : Stepper (onIncrement / onDecrement)

목차

 

 

 Stepper에 대해 알아보도록 합시다.

Stepper

사용자가 값을 증가시키거나 감소시키면서 세분화된 제어를 하도록 하려면 Stepper 컨트롤을 사용해야 합니다.

 

예를들어 Stepper는 다음과 같이 수행 됩니다.

• 값을 1로 위아래로 변경합니다.
• 규정된 범위 내에서 작동 됩니다.
• Stepper의 가능한 값 범위에서 특정 양만큼 단계적으로 수행 합니다.

고급예제를 알아 보기 전에 간단하게 Stepper를 표현하는 방법에 대해서 보고 가도록 하겠습니다.

 

Stepper를 사용하면  + (incrementStep)  - (decrementStep) 버튼이 나오는 화면을 구성 할 수 있습니다.

struct ContentView: View {
    
   //Stepper에 보여질 Amount값을 추가해주고
    @State private var sleepAmount = 8.0
    
    var body: some View {
         //스테퍼를 할당해 준다. $값 필수
        Stepper(value: $sleepAmount) {
            Text("\(sleepAmount) hours")
        }
    }
}

Stepper의 증감률을 제한 하는 방법

Stepper(value : $someValue, in: n...nn)

struct ContentView: View {
    
    @State private var sleepAmount = 8.0
    
    var body: some View {
       //증감률을 2...12까지로 제한한다.
        Stepper(value: $sleepAmount, in: 2...12) {
            Text("\(sleepAmount) hours")
        }
        .padding()
    }
}

원하는 단위 설정

Stepper(value:    ,in: n...nn, step: 0.25)

기본 소수점을 없애는 방법

Text("\(sleepAmount, specifier: "%g") hours")

struct ContentView: View {
    
    @State private var sleepAmount = 8.0
    
    var body: some View {
        Stepper(value: $sleepAmount, in: 2...12, step: 0.25) {
            Text("\(sleepAmount, specifier: "%g") hours")
        }
        .padding()
    }
}

struct ContentView: View {
    
    @State var age = 12
    
    var body: some View {
        VStack {
            Stepper("당신의 나이는?", value: $age, in: 0...80)
            Text("당신의 나이는 \(age) 세 입니다.")
        }
        .padding()
    }
}

onIncrement / onDecrement 

아래 예제는 컨트롤의 배경 색상을 설정하기 위해 여러 Color 값, 로컬 상태 변수, 값을 포함하는 배열 및 제목 레이블을 사용합니다.

사용자가 Stepper의 증가버튼 또는 감소버튼을 클릭하면, SwiftUI는 값을 업데이트하여 오버플로를 방지하기 위해 값을 랩핑합니다.

 

그런 다음 SwiftUI는 현재 인덱스에 맞게 텍스트 및 배경 색상을 업데이트하여 뷰를 다시 렌더링합니다

struct ContentView: View {
    
    @State private var value = 0
    
    let colors: [Color] = [.orange, .red, .gray, .blue,
                           .green, .purple, .pink]

    //증가값 함수
    func incrementStep() {
        //클릭마다 +1씩 증가
        value += 1
        /* value가 colors개수보다 작거나 같으면 value는 0
              즉, pink색이 되면 -> orange색으로 돌아감 */
        if value >= colors.count { value = 0 }
    }
    //감소값 함수
    func decrementStep() {
        //클릭마다 -1씩 증가
        value -= 1
        /* value가 0보다 작으면 value는 colors개수에 -1
              즉, orange색에서 -> pink색으로 돌아감 */
        if value < 0 { value = colors.count - 1 }
    }

    var body: some View {
             /*증가버튼을 누르면: incrementStpe이 실행되고,
               감소버튼을 누르면: decrementStep이 실행된다. */
        Stepper(onIncrement: incrementStep,
            onDecrement: decrementStep) {
            
            Text("값: \(value) 색상: \(colors[value].description)")
        }
        .padding(5)
        //색상을 할당해준다.
        .background(colors[value])
    }
}

 

 

 

읽어주셔서 감사합니다🤟