【SwiftUI】Stepperの実装方法を解説

Stepperの実装

基本的な実装

まずは、Stepperの基本的な実装方法について解説致します。Stepperには、文字列をラベルとするイニシャライザと、Viewをラベルとするイニシャライザがあります。

文字列をラベルとするイニシャライザ

文字列をラベルとするイニシャライザは、以下のように実装します。

Stepper(文字列, value: 値)

第１引数には、ラベルとして表示する文字列を指定します。

第２引数のvalue: には、@Stateで宣言した数値のプロパティを指定します。

以下は、Stepperで変更した値がTextに表示されるサンプルコードです。

Viewをラベルとするイニシャライザ

Viewをラベルとするイニシャライザは、以下のように実装します。

Stepper(value: 値, label: {
    View
})

label: の部分に、ラベルとして表示したいViewを実装します。

以下は、ImageとTextをラベルとしたStepperのサンプルコードです。

範囲の指定

続いて、選択できる範囲を指定する方法を紹介致します。範囲を指定するには、in: を追加します。

Stepper(文字列, value: 値, in: 範囲)

in: には、「最小値…最大値」というように、ClosedRangeで範囲を指定します。

以下は、最小値を-3、最大値を3に指定したStepperのサンプルコードです。

増減幅の指定

続いて、ボタン操作時の値の増減幅を指定する方法を紹介致します。増減幅を指定するには、step: を追加します。

Stepper(文字列, value: 値, step: 増減幅)

step: には増減幅を数値で指定します。負の値を指定することも可能です。

また、浮動小数点を指定することもできますが、その場合は、プロパティも浮動小数点型にする必要があります。

以下は、増減幅を0.5に設定したStepperのサンプルコードです。

最大値・最小値に到達すると、ボタンが非活性表示となり、タップしても反応しなります。

操作の開始・終了イベントの取得

操作の開始・終了イベントを取得するには、onEditingChanged: を追加します。

Stepper(文字列, value: 値, onEditingChanged: { bool in
    処理
})

onEditingChanged: には、クロージャーで、ユーザーが操作を開始・終了したタイミングで行いたい処理を実装します。onEditingChangedは、ユーザーがボタンを押下したタイミングと離したタイミングの２回呼ばれます。引数として渡ってくる、開始(true)・終了(false)のBool値で、処理を分けることができます。

以下は、編集開始時に「編集中です。」、編集終了時に「編集中ではありません。」と、Textの表示が変わるサンプルコードです。

ちなみに、これまで紹介したin: 、step: 、onEditingChanged: は、以下のように、合わせて使用することもできます。

Stepper(文字列, value: 値, in: 範囲, step: 増減幅, onEditingChanged: { bool in
    処理
})

Stepper(value: 値, in: 範囲, step: 増減幅, onEditingChanged: { bool in
    処理
}, label: {
    View
})

Stepper(文字列, onIncrement: {
    [+]ボタンタップ時の処理
}, onDecrement: {
    [-]ボタンタップ時の処理
})