[SwiftUI] Stepper の使用方法

Stepper には[+]と[-]のボタンがあり、値のカウントアップやカウントダウンをすることができます。
今回は、この Stepper の使用方法について説明します。

Stepper の使用方法

環境
Stepper の基本使用方法
数値の増減幅を設定する
数値の範囲を指定する
[+][-]のボタンが押された/離されたことを検知する
[+][-]の増減処理を独自に実装する

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.4
Swift: 5.2.4

Stepper の基本使用方法

Stepper の基本的な構文は以下の通りです。
Steppere の第１引数には、[+]や[-]ボタンがタップされたときにカウントアップ/カウントダウンをする数値を格納する変数を指定します。この変数は @State 等で宣言をしておく必要があります。次の Text には、Stepper のラベルに表示する文字列を指定します。

Stepper(value: 変数) {
    Text("ラベルに表示する文字列")
}

以下に Stepper の基本的な使用例を示します。
この例では Stepper のラベルに「○ cm」を表示するようにしており、[+]や[-]をタップすると「1cm」や「2cm」のようにカウントアップをしたり、カウントダウンをすることができます。

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        Stepper(value: $count) {
            Text("\(count) cm")
        }
        .padding()
    }
}

Stepper の基本使用例

数値の増減幅を設定する

先程の例では、[+]や[-]をタップすると1ずつ増減しました。
場合によっては、小数点第１位単位でカウントアップやカウントダウンしたい場合もあるでしょう。このような場合は、以下の書式を使用して、step 引数に数値の増減幅を設定します。

Stepper(value: 変数, step: 増減値) {
    Text("ラベルに表示する文字列")
}

以下に使用例を示します。
この例は、先程の例をカスタマイズし、Stepper の step 引数に 0.2を指定することで「0.2」ずつカウントアップ/カウントダウンをします。

struct ContentView: View {
    @State private var count = 0.0

    var body: some View {
        Stepper(value: $count, step: 0.2) {
            Text("\(count) cm")
        }
        .padding()
    }
}

数値の範囲を設定する例1

先程の例では、小数点以下が6桁表示されていました。6桁もいらないという場合には、フォーマット指定をして桁数を変更することができます。
Stepper のモディファイに指定する Text は以下のような書式にします。specifer 引数には「%.2f」のように書式をしています。「%.2f」は小数点第２位まで表示することを意味し、「%.3f」とすれば小数点第３位までを表示します。

Text("\(変数, specifier: 書式)")

先程のコードを変更して、小数点第２位までを表示するようにした例を以下に示します。

struct ContentView: View {
    @State private var count = 0.0

    var body: some View {
        Stepper(value: $count, step: 0.2) {
            Text("\(count, specifier: "%.2f") cm")
        }
        .padding()
    }
}

Stepper の増減幅を設定する例2

数値の範囲を指定する

Stepper は、in パラメータを持つイニシャライザを使用することで、数値の範囲を指定することができます。

Stepper(value: 変数, in: 範囲)

以下の例では Stepper の in パラメータに「30…50」を指定して、[+][-]で変更できる数値の範囲を 30〜50 に指定しています。

struct ContentView: View {
    @State private var count = 30.0

    var body: some View {
        Stepper(value: $count, in: 30...50, step: 0.2) {
            Text("\(count, specifier: "%.2f") cm")
        }
        .padding()
    }
}

数値の範囲を設定する例

[+][-]のボタンが押された/離されたことを検知する

Stepper の[+][-]ボタンは「押された」という状態と「離された」という状態を検知することができます。
Stepper のイニシャライザには onEditingChanged パラメータを持つものがあります。

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

この onEditingChanged は、[+][-]を押したときと離したときの２回呼ばれます。/離されたという状態を引数で取得することができます。onEditing の引数には押した（true）、離した（false）のbool 値が渡されます。
以下の例では、onEditingChanged で onTap という変数に押した(true）/離した（false）の状態を受け取ります。 onTap の値が true の時は[+][-]が押された状態ですので「押された」を表示し、false の場合は「離された」を表示します。

struct ContentView: View {
    @State private var count = 30.0

    var body: some View {
        Stepper(value: $count, onEditingChanged:{ onTap in
            if onTap {
                print("押された")
            } else {
                print("離された")
            }
            
        }) {
            Text("\(count, specifier: "%.2f") cm")
        }
        .padding()
    }
}

[+][-]のボタンが押された/離されたことを検知する例

[+][-]の増減処理を独自に実装する

Stepper のイニシャライザには、以下のように onIncrement とonDecrement を持つものがあります。onIncrement は [+] をタップした時の処理を任意に実装することができ、onDecrement は [-] をタップした時の処理を任意に実装することができます。

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

以下の例では [+] をタップした時に 5ずつカウントアップし、[-] をタップした時は -1ずつカウントダウンします。

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        Stepper("\(count)",
            onIncrement:{
                self.count += 5
            },
            onDecrement: {
                self.count -= 1
            }
        )
        .padding()
    }
}

[+][-]の増減処理を独自に実装する例