Stepperはカウントアップ/ダウンの入力に使用できるUIですが、あまり仕様頻度は高くないイメージですよね。
今回はSwiftUIでのStepperの使い方を説明します。
環境
- Xcode12.5.1
- 動作はシミュレーターのiPhone12 mini
基本的な使い方
Steppere の第１引数のvalueには、[+][-]ボタンがタップされたときにカウントアップ/ダウンをする変数を指定します。この変数は値を変更できるように @State で宣言をしておき、なおかつ参照渡しをするため $ をつけましょう。
また、クロージャには変更した値を表示するためのTextなどを設定しましょう。
struct ContentView: View {
@State private var count = 0
var body: some View {
Stepper(value: $count) {
Text("\(count) 回")
}
.padding()
}
}
数値の最小/最大値を設定
Stepperで入力できる数値の最小値と最大値を設定することができます。
以下のように、引数inにClosedRange型（0…10）で指定します。
struct ContentView: View {
@State private var count = 0
var body: some View {
Stepper(value: $count, in: 0...10) {
Text("\(count) 回")
}
.padding()
}
}こうすると、入力範囲は０から１０になります。
増減する幅の設定
体重や身長など、0.1単位で増減させたい場合もあると思います。
その場合は以下のようにstepという引数を指定しましょう。
struct ContentView: View {
@State private var count = 0.0
var body: some View {
Stepper(value: $count, in: 0...10, step: 0.1) {
Text("\(count, specifier: "%.1f") 回")
}
.padding()
}
}Text内で specifierを使用しているのは、表示する値のフォーマットを小数第１位までに指定するためです。これをしないと小数第６位くらいまで表示されちゃいます。
ボタン押下時の処理を実装する
引数onEditingChangedで値変更時に実行する処理を記述できます。
この処理はボタンを押した時と離した時に呼ばれ、クロージャの引数にtrue/falseが渡されます。
struct ContentView: View {
@State private var count = 0.0
var body: some View {
Stepper(value: $count, in: 0...10, step: 0.1, onEditingChanged:{ touchBegin in
if touchBegin {
print("ボタン押した")
}
else {
print("ボタン離した")
}
}) {
Text("\(count, specifier: "%.1f") 回")
}
.padding()
}
}増減処理の独自実装
なかなかないと思いますが、増加量と減少量を別々にしたいという場合は以下のような実装で実現できます。
struct ContentView: View {
@State private var count = 0.0
var body: some View {
Stepper(onIncrement: {
self.count += 1
},
onDecrement: {
self.count -= 0.1
}) {
Text("\(count, specifier: "%.1f") 回")
}
}
}
コメント