SwiftUI: Stepper

Stepper, kullanıcıların belirttiğimiz aralıkta bir değer seçmesine olanak tanıyan arayüz elemanıdır.

Merhaba sevgili TurkishKit okuyucuları! 👋🏼 Bugün sizlerle Stepper objesinin ne olduğunu ve uygulamalarımızda nasıl kullanabileceğimizi öğreneceğiz. Hazırsanız hemen başlayalım! 🎊

Kodlama

Yeni bir SwiftUI projesi açalım ve kodlamaya başlayalım. İlk olarak Text nesnesini VStack içerisine alalım. Daha sonra Stepper nesnemizi VStack içerisine sürükleyip bırakalım.

struct ContentView: View {
    var body: some View {
        VStack {
            Text(“Hello, world!”)
                .padding()
            Stepper(value: Value, in: Range) {
               Label
            }
        }
    }
}

@State ile kullanıcının yaşını tutabileceğimiz bir değişken tanımlayalım.

struct ContentView: View {
    @State var age = 0
    var body: some View {
        VStack {
            Text(“Hello, world!”)
                .padding()
            Stepper(value:Value, in: Range) {
               Label
            }
        }
    }
}

Stepper nesnemizin parametrelerini dolduralım:

• Label yazan yere Text nesnesi ile Stepper nesnemize bir başlık verelim.
• value parametresine age değişkenini yazalım.
• in parametresine hangi aralıklarda değer alacağını belirtelim.
• Text nesneine age değişkenini yazalım ve değişikliği görelim.

struct ContentView: View {
    @State var age = 0
    var body: some View {
        VStack {
            Text(“\(age)”)
                .padding()
            Stepper(value: $age, in: 0...100) {
               Text("Yaş:")
            }
        }
    }
}

Uygulamamızı çalıştırıp test edelim.

Artış Miktarını Değiştirme

Stepper değerinin ikişer ikişer artmasını istiyorsak bu sefer Stepper nesnesini kod bloğunda kendimiz oluşturacağız.

Stepper yazıp parantez açında “auto complete” ekranında “onIncrement” ve “OnDecrement” parametreli fonksiyonu seçelim.

struct ContentView: View {
    @State var age = 0
    var body: some View {
        VStack {
            Text(“\(age)”)
                .padding()
            Stepper(value: $age, in: 0…5) {
                Text(“Yaş:”)
            }
            Stepper(title: ,onIncrement: ,onDecrement: )
       }
    }
 }

• title parametresine “Yaşını Seç:” yazalım.
• onIncrement parametresini Enter tuşuna basarak açalım.

struct ContentView: View {
    @State var age = 0
    var body: some View {
        VStack {
            Text(“\(age)”)
                .padding()
            Stepper(value: $age, in: 0…5) {
                Text(“Yaş:”)
            }
          Stepper("Yaşını Seç") {
             code
          } onDecrement: {
             code
          }
       }
    }
 }

İlk kod bloğunun içerisine self.age += 2 yazıyorum ve böylelikle Stepper nesnesi üzerindeki artı (+) butonuna her bastığımda sayı ikişer ikişer artacaktır.

İkinci kod bloğunun içerisine self.age += 2 yazıyorum ve böylelikle Stepper nesnesi üzerindeki eksi (-) butonuna her bastığımda sayı ikişer ikişer azalacaktır.

struct ContentView: View {
    @State var age = 0
    var body: some View {
        VStack {
            Text(“\(age)”)
                .padding()
            Stepper(value: $age, in: 0…5) {
                Text(“Yaş:”)
            }
            Stepper("Yaşını Seç") {
             self.age += 2
            } onDecrement: {
             self.age -= 2
          }
       }
    }
 }

Bu makalemizde yapmış olduğumuz projemize buradan ulaşabilirsiniz:

TurkishKit/SwiftUI-Stepper

Bir makalemizin daha sonuna geldik. Bu yazımızda Stepper nesnemizi ele aldık. Stepper değerlerini ikişer ikişer yada daha fazla aralıklarla arttırıp azaltabilirsiniz. Hatta negatif değere geçmesini önleyebilirsiniz. Bunu size bırakıyorum. 🤓 Bu kontrolü nasıl yaptığınızı bizimle paylaşıranız seviniriz. İyi kodlamalara dilerim.

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook