【SwiftUI】Stepperの使い方

Stepperの使い方を紹介します。
[-]と[+]ののボタンで値を増減するタイプの部品です。

Stepperの画像

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.4
【Swift】5.2
【iOS】13.4
【macOS】Catalina バージョン 10.15.3

基本的な使い方

引数valueにはStepperと関連付けるプロパティを指定します。
このプロパティの値は初期値として使用され、選択が変更されると値も同じく変更されます。
値が変更できるように、このプロパティは@State等で宣言しておく必要があります。
頭に$が付いているのは、プロパティの値では無く参照を渡し、Stepperがプロパティの値を更新可能にする意味があります。

最後に表示するラベルViewをクロージャーとして渡します。
一般的には次の使用例のように、Stepperによって変更する値をここに表示させる使い方となります。

使用例

Stepperの画像

数値の範囲を指定する

引数inで数値の範囲を制限できます。
範囲指定はClosedRange型(0...10)のみです。Range型(0..<10)は使えないので注意してください。

使用例

数値の増減幅を指定する

引数stepで[-][+]ボタンを押した時の数値の増減幅を指定できます。
未指定時のデフォルト値は1です。

使用例

値変更時の処理を指定する

引数onEditingChangedで値変更時に実行する処理を記述できます。

具体的には、[+]のまたは[-]のボタンを押した時と、離した時に呼ばれます。
つまり、1度の操作で2回呼ばれるので注意して下さい。
クロージャーへの引数として、ボタンを押した時にはtrue、離した時にはfalseが渡されます。

使用例

増減処理を独自に実装する

引数onIncrementとonDecrementで増減処理を独自に実装可能です。
次の使用例のように、増加時と減少時の変更幅を変えるような実装も可能となります。

注意点として、先に紹介した引数value、in、stepとは同時に使えません。
onEditingChangedとは同時に使用可能です。

使用例

あわせて読みたい記事

【SwiftUI】@Stateの使い方
SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。
【SwiftUI】Textの使い方
Textは読み取り専用テキストを表示するViewです。UiKitのUILabelに相当する部品です。
【SwiftUI】Formの使い方
FormはiOSの「設定」アプリのようなUIを実現するViewタイプです。データ入力用の部品(View)をグループ化して表示できます。