Stepper

Stepper-Steuerelemente sind in nur wenigen Anwendungen anzutreffen, denn ihre Einsatzmöglichkeiten sind beschränkt. Immer wenn es erforderlich ist, einen Zahlenwert auszuwählen, ohne den Anwender eine direkte Eingabe zu ermöglichen, können Stepper verwendet werden. Mit dem Stepper-Steuerelement kann ein Wert schrittweise erhöht oder verringert werden.

In der grafischen Oberfläche wird ein Stepper durch mehrere Elemente realisiert. Neben der Anzeige des Wertes gibt es zwei Schaltflächen. Ein Button, um den Wert zu erhöhen, und der andere Button um den Wert zu verringern. Bei der Entwicklung sollte darauf geachtet werden, dass die Anzahl der möglichen Zahlenwerten nicht zu groß ist. Zahllose Klicks des Nutzers wären die Folge, wenn er die Auswahl vom kleinsten auf den größten Wert ändern möchte. Muss ein größerer Bereich an Zahlen zu Auswahl abgedeckt werden, ist das Schieberegler Steuerelement (Slider) die bessere Wahl. Stepper gehören zu den Steuerelementen, die unter macOS und iOS unterschiedliche dargestellt werden.

Ein Stepper-Steuerelement in einer unkomplizierten Konfiguration zeigt der folgenden Code. In der Variablen value wird der ausgewählte Wert verwaltet. Er wird über eine Datenbindung, erkennbar an dem $, mit dem Steuerelement verbunden. Jede Änderung der Auswahl wird automatisch mit dem Variablenwert synchronisiert. Zusätzlich gibt es zwei Konstanten. Die Konstante step gibt an, in welcher Schrittgröße sich der Wert verändern soll. Die Konstante range legt den auswählbaren Bereich fest. 

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

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

Mehr Optionen bietet der Stepper in einer umfangreicheren Konfiguration. Dabei wird nicht von Anfang an ein Bereich vorgegeben. Stattdessen müssen die Funktionen zum Erhöhen und Verringern des Wertes vom Entwickler implementiert werden. Zusätzliche Arbeit, die aber mehr Flexibilität erlaubt. 

struct ContentView: View {
    
    @State private var value = 0
    
    var body: some View {
                
        Stepper {
            Text("Current value: \(value)")
        } onIncrement: {
            value = value + 5
            if value > 50
            {
                value = 50
            }
        } onDecrement: {
            value = value - 5
            if value <= 0
            {
                value = 0
            }
        }
        .padding(10)
    }
}
Stacks Image 111

Ein Stepper muss nicht zwangsläufig für Zahlen verwendet werden obwohl im Hintergrund meistens ein numerischer Typ als Index agiert. Der angezeigte Wert kann ein anderer Typ sein. Im folgenden Beispiel wird ein Stepper verwendet, um eine Auswahl von verschiedenen Städten zu realisieren. Auch hier sollte die Benutzbarkeit nicht vernachlässigt werden. Bei einer längeren Liste ist das Picker-Steuerelement besser geeignet. 

struct ContentView: View {
    
    private let cities = ["London", "Rom", "Tokyo", "Paris", "Oslo"]
    @State private var value = 0
 
    func incrementStep() {
        value = value + 1
        if value > cities.count - 1
        {
            value = 0
        }
    }

    func decrementStep() {
        value = value - 1
        if value < 0
        {
            value = cities.count - 1
        }
    }
    
    var body: some View {
    
        Stepper {
            Text("Current destination: \(cities[value])")
        } onIncrement: {
            incrementStep()
        } onDecrement: {
            decrementStep()
        }
        .padding(10)
    }
}
Stacks Image 109

Veröffentlicht am: 01.01.2025

© 2025 Holger Hinzberg Contact