Structure

Stepper

A control that performs increment and decrement actions. 漸増および漸減アクションを実行するコントロール。

Declaration 宣言

struct Stepper<Label> where Label : View

Overview 概要

Use a stepper control when you want the user to have granular control while incrementing or decrementing a value. For example, you can use a stepper to:

Change a value up or down by 1.
Operate strictly over a prescribed range.
Step by specific amounts over a stepper’s range of possible values.

The example below uses an array that holds a number of Color values, a local state variable, value, to set the control’s background color, and title label. When the user clicks or taps on the stepper’s increment or decrement buttons SwiftUI executes the relevant closure that updates value, wrapping the value to prevent overflow. SwiftUI then re-renders the view, updating the text and background color to match the current index:

struct StepperView: View {
    @State private var value = 0
    let colors: [Color] = [.orange, .red, .gray, .blue,
                           .green, .purple, .pink]


    func incrementStep() {
        value += 1
        if value >= colors.count { value = 0 }
    }


    func decrementStep() {
        value -= 1
        if value < 0 { value = colors.count - 1 }
    }


    var body: some View {
        Stepper {
            Text("Value: \(value) Color: \(colors[value].description)")
        } onIncrement: {
            incrementStep()
        } onDecrement: {
            decrementStep()
        }
        .padding(5)
        .background(colors[value])
    }

}

A view displaying a stepper that uses a text view for stepper’s title

The following example shows a stepper that displays the effect of incrementing or decrementing a value with the step size of step with the bounds defined by range:

struct StepperView: View {
    @State private var value = 0
    let step = 5
    let range = 1...50


    var body: some View {
        Stepper(value: $value,
                in: range,
                step: step) {
            Text("Current: \(value) in \(range.description) " +
                 "stepping by \(step)")
        }
            .padding(10)
    }
}

A view displaying a stepper with a step size of five, and a

Topics 話題

ステッパーを作成する

init<V>(value: Binding<V>, step: V.Stride, label: () -> Label, onEditingChanged: (Bool) -> Void)

Creates a stepper configured to increment or decrement a binding to a value using a step value you provide.

Available when Label conforms to View. LabelがViewに準拠する場合に利用可能です。

init<V>(LocalizedStringKey, value: Binding<V>, step: V.Stride, onEditingChanged: (Bool) -> Void)

Creates a stepper with a title key and configured to increment and decrement a binding to a value and step amount you provide.

Available when Label is Text. LabelがTextである時に利用可能です。

init<S, V>(S, value: Binding<V>, step: V.Stride, onEditingChanged: (Bool) -> Void)

Creates a stepper with a title and configured to increment and decrement a binding to a value and step amount you provide.

Available when Label is Text. LabelがTextである時に利用可能です。

Creating a Stepper Over a Range

init<V>(value: Binding<V>, in: ClosedRange<V>, step: V.Stride, label: () -> Label, onEditingChanged: (Bool) -> Void)

Creates a stepper configured to increment or decrement a binding to a value using a step value and within a range of values you provide.

Available when Label conforms to View. LabelがViewに準拠する場合に利用可能です。

init<V>(LocalizedStringKey, value: Binding<V>, in: ClosedRange<V>, step: V.Stride, onEditingChanged: (Bool) -> Void)

Creates a stepper instance that increments and decrements a binding to a value, by a step size and within a closed range that you provide.

Available when Label is Text. LabelがTextである時に利用可能です。

init<S, V>(S, value: Binding<V>, in: ClosedRange<V>, step: V.Stride, onEditingChanged: (Bool) -> Void)

Creates a stepper instance that increments and decrements a binding to a value, by a step size and within a closed range that you provide.

Available when Label is Text. LabelがTextである時に利用可能です。

Creating a Stepper with Change Behavior

init(label: () -> Label, onIncrement: (() -> Void)?, onDecrement: (() -> Void)?, onEditingChanged: (Bool) -> Void)

Creates a stepper instance that performs the closures you provide when the user increments or decrements the stepper.

init(LocalizedStringKey, onIncrement: (() -> Void)?, onDecrement: (() -> Void)?, onEditingChanged: (Bool) -> Void)

Creates a stepper that uses a title key and executes the closures you provide when the user clicks or taps the stepper’s increment and decrement buttons.

Available when Label is Text. LabelがTextである時に利用可能です。

init<S>(S, onIncrement: (() -> Void)?, onDecrement: (() -> Void)?, onEditingChanged: (Bool) -> Void)

Creates a stepper using a title string and that executes closures you provide when the user clicks or taps the stepper’s increment or decrement buttons.

Available when Label is Text. LabelがTextである時に利用可能です。