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を使うと良い。