Stepperビューは「+」「-」ボタンで値を増減させるためのビューで、デフォルトでは1ずつしか増減しないようになっている。

今回はこの増減値を任意の値、今回は10刻みで増減させるようにする方法を紹介する。

基本のコード

まずはStepperビューを使用するにあたっての基本的なコードを見てみよう。

struct ContentView: View {
    @State var age = 18
    
    var body: some View {
        VStack {
            Stepper(value: $age, in: 0...120) {
                Text("年齢を入力してください")
            }
            Text("あなたの年齢: \(age)")
        }
    }
}

value引数には状態変数をバインドさせ、in引数に選択可能な数値の範囲を指定する。

増減値を設定する

増減値を設定する際は、以下のようにイベント処理を記述すれば良い。
この場合は状態変数をバインドさせる必要はなく、クロージャ内に独自の処理を記述を書く。

struct ContentView: View {
    @State var age = 20
    
    var body: some View {
        VStack {
            Stepper(
                onIncrement: {
                    self.age += 10
            },
                onDecrement: {
                    self.age -= 10
            }) {
                Text("あなたの年代を入力してください")
            }
            Text("あなたの年齢: \(age)歳代")
        }
    }
}

なお、今回のように単純に増減値の幅を数値で指定するだけであれば、Stepperビューのstep引数で設定することもできるが、例えば現在値から10%ずつ増減させる、といった複雑な処理をする場合は今回紹介したonIncrement、onDecrementを使うと良い。