Swift・SwiftUI

SwiftUIのStepper(UIStepper)を使い方【SwiftUI入門】

今回は UIStepper の SwiftUI版、Stepper についてのサンプルを紹介します。

SwiftUIのStepper(UIStepper)を使い方

Stepper は何かの個数を選択する場合などに使用しますが、+ or – のボタンで１つずつカウントするものなので、通常は選択する値の範囲が狭い場合に使用することを推奨します。そのため、100個、200個ほど選択幅がある場合は Picker を利用するか、TextField で入力してもらう方がユーザビリティ的に良いかと思います。

まずは、イニシャライザーの定義です。いくつかありますが、以下のイニシャライザーが大体の用途に利用できるかと思います。

Stepper(value: Binding<Strideable>, in: ClosedRange<Strideable>, step: Comparable & SignedNumeric, onEditingChanged: (Bool) -> Void, label: () -> _)

value: Binding<Strideable> には状態変数（@State）を指定します。

@State private var stepCount = 0
・・・
Stepper(value: $stepCount, ...

in: CloseRange<Strideable> には設定する値の範囲を指定します。

Stepper(..., in: 0...10, ...

step: Comparable & SignedNumeric には値の増減値を指定します。

Stepper(..., step: 5, ...

onEditingChanged: (Bool) -> Void は、値の増減時に何か処理を行いたい場合のクロージャメソッドを指定します。必要に応じてエラー処理などを記述すると良いかと思います。

Stepper(..., onEditingChanged { _ in
    エラー処理など
}

label: () -> _ はラベルを指定します。

Stepper(...) {
    Text("個数を指定してください：\($stepCount)個")
}

最後に、冒頭サンプルのソースコード全体を紹介します。

身長を入力するサンプルで、入力範囲を 140.0〜200.0、増減値を 0.5 としています。

struct ContentView: View {
    
    @State private var height = 170.0
    
    var body: some View {
        Form {
            Stepper(value: $height, in: 140.0...200.00, step: 0.5, onEditingChanged: {_ in
                必要に応じて何か処理
            }, label: {
                Text("身長：" + (floor(self.height * 10) / 10).description + "cm")
            })
        }
    }
}

以上