SwiftUI List Bileşeni (Listeleme İçin TableView Alternatifi)

Daha önce sizlerle Swift için TableView notlarımı paylaşmıştım. Artık SwiftUI bize göz kırpmışken bir yandan da kenardan kenardan SwiftUI’a yanaşayım dedim. SwiftUI ile ilgili List bileşeninden başlayarak öğrendikçe notlarımı sizlerle paylaşacağım.

List{
   // Listenecek Bileşenler
}

En basit hali ile yukarıdaki gibi tanıyabilirsiniz List bileşenini. Bir çok farklı kullanımı mevcut elbette. Tabiki içerisinde bazı View’lar olması gerekiyor. Örneğin text bileşeni ile kullanalım.

List {
    Text("deneme1")
    Text("deneme2")
    Text("deneme3")
    Text("deneme4")
    Text("deneme5")
}

Yukarıdaki kod bize görseldeki gibi bir görüntüyü çıkaracaktır. Sadece görseldeki gibi Text() bileşeni ile değil, farklı bileşenleri de barındırabiliyor List() bileşeni. Aşağıda bir kaç örnek daha paylaşacağım.

Farklı Bileşenlerin List İçerisinde Kullanımı

Bir başka yazıda ZStack, HStack ve VStack kullanımlarından bahsedeceğim. Aslında ilk bahsetmem gereken konu buydu. Fakat hızlı öğrenilecek konular olduğu için örneklerin içinde görebilirsiniz kullanımlarını. Ben şimdilik öncelik verme gereği duymadım.

List {

     HStack{
          Image("avatar").resizable()
          .frame(width: 25, height: 25, alignment: .center)
          Text("Deneme 2")
     }

     HStack{
          Image("avatar").resizable()
          .frame(width: 25, height: 25, alignment: .center)
          Text("Deneme 2")
     }

}

Yukarıdaki örnekte gördüğünüz gibi HStack bileşenlerin yanyana gelmesini sağlıyor. Yatay bir düzlem oluşturuyor. Örnekte Image() kullanımı da yukarıda gördüğünüz gibi.

Dilediğiniz gibi SwiftUI içerisinde kullanılabilen bir çok bileşeni List içerisinde kullanabilirsiniz.

List İçerisinde Array Listeleme

List hepimiz için 🙂 ForEach döngüsü ile aynı şekilde, aşağıdaki gibi kullanımı da mevcuttur. 3 Elemandan oluşan bir arkadaşlar dizisi tanımlayalım.

var arkadaslar = ["Fatma","Emine","Deniz"]

Sonrasında List içerisinde arkadaşlarımızı az önceki kodu güncelleyerek listeleyelim.

List(arkadaslar, id: \.self) { arkadas in
    HStack{
        Image("avatar").resizable()
        .frame(width: 25, height: 25, alignment: .center)
        Text(arkadas)
    }
}

Bu örnekte de text alanları arkadaş isimleri ile değişmektedir.

 

Leave a Reply:

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir