SwiftUI: Picker

Picker elemanı ile uygulamanızın kullanıcılarını sadece istenilen verileri (istenilen şekilde) girmesini garanti altına almış olursunuz.

Merhaba TurkishKit okuyucular!🖖 Bu makalemizde SwiftUI ile birlikte hayatımıza giren Picker elemanını nasıl kullanabileceğimizi öğreneceğiz. O zaman, öğrenmeye başlayalım!

Picker Nedir?

Picker elemanı, aynı çoktan seçmeli sorular gibidir; yapmanız gereken tek şey, içindeki seçeneklerden birini seçmektir. Bu sayede, uygulamanızın kullanıcılarını sadece istenilen verileri (istenilen şekilde) girmesini garanti altına almış olursunuz.

Hadi Kodlayalım

Öncelikle “Single View App” formatında yeni bir Xcode projesi oluşturalım.

Projeyi oluşturduktan sonra ContentView.swift dosyasına gidelim. Picker elemanımızın içerisinde bir dizi içerik göstermek için bir diziye ihtiyacımız olacak. Bu yüzden String türünden değerler içeren bir dizi oluşturalım.

var products = ["Mac", "iPhone", "iPad", "iPod"]

Sonrasında Picker elemanında hangi kaçıncı değerin seçili olduğunu anlamak için Int türünden bir değişken oluşturalım.

@State private var selectedProduct = 0

Artık elemanımızı oluşturabiliriz. Bunun için body değerinin içerisinde bir Picker elemanı tanımlayalım.

Picker(selection: $selectedProduct, label: Text("Product")) {
}

Picker elemanımızın içerisinde Text eleman-lar-ı kullanmak için bir ForEach elemanı oluşturalım.

Picker(selection: $selectedProduct, label: Text("Product")) {
    ForEach(0 ..< products.count) {
        Text(self.products[$0])
    }
}

Şu an projeyi çalıştırırsanız uygulama bu şekilde gözükecektir.

Göreceğiniz üzere Picker elemanı çalışıyor ama yanındaki başlık hiç iyi gözükmediği gibi bu elemanda hangi değerin seçili olduğunu başka bir eleman üzerinden doğrulayamıyoruz.

İlk başta o kötü gözüken başlığı ortadan kaldıralım. Bunun için Picker elemanının sonunda “labelsHidden” fonksiyonunu yazalım.

Picker(selection: $selectedProduct, label: Text("Product")) {
    ForEach(0 ..< products.count) {
        Text(self.products[$0])
    }
}.labelsHidden()

Hangi seçeneğin seçili olduğunu görmek için bir Text elemanı oluşturalım. Text ve Picker elemanını bir arada kullanmak için bir VStack elemanı kullanalım.

VStack {
    Text(products[selectedProduct])
    Picker(selection: $selectedProduct, label: Text("Product")) {
        ForEach(0 ..< products.count) {
            Text(self.products[$0])
        }
    }.labelsHidden()
}

Projeyi çalıştırdığınızda göreceksinizdir ki artık her şey hazır!

Bu yazımızda yapmış olduğumuz projemize buradan ulaşabilirsiniz:

TurkishKit/SwiftUI-Picker

Bir yazımızın daha sonuna geldik. Yazımızda Picker elemanının ne olduğunu ve nasıl kullanabileceğimizi öğrendik. Yeni SwiftUI yazılarımız çok yakında sizlerle birlikte olacak. Keyifli kodlamalar! 🤟

Yazı Önerisi 🔥

Daha öncesinden UIKit ile nasıl UIPickerView elemanını nasıl kullanabileceğimizi öğrendiğimiz yazımıza aşağıdan ulaşabilirsiniz.

UIKit: UIPickerView

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

Twitter | Instagram | Facebook