SwiftUI Grid List

Merhaba arkadaşlar. Bu yazımızda SwiftUI ile beraber nasıl ikiye veya daha fazla sayıya bölünmüş bir liste oluşturacağımıza bakacağız. Daha önceki yazımda nasıl bir liste oluşturulur bundan bahsetmiştik. Buradan ulaşabilirsiniz. Bu yazımızda ise alında bunu biraz daha geliştireceğiz.

İlk olarak en tepeye bir Navigation View ekliyorum. İçerisine ise Scroll View ekliyorum. Bunun sebebi ise, bazen veriler çok fazla olabilir veya kullanıcı ufak ekranlı bir telefon kullanabilir. Bunları düşünüp ekranın aşağı veya yukarı kaydırabilmesini sağlamalıyız. Bunun için en dışa bir Scroll View ekledik. Sonrasında ise ekranı gridlere bölmemiz gerekiyor. Burada ekranı kaça böleceğimiz önemli. Ben örnek olması açısından dörde böleceğim. Siz yine kendi tasarımınıza göre değiştirebilirsiniz. İlk olarak LazyVGrid ekliyorum. Bunun anlamı ise şu dikeyde hareket edebilen grid aslında. Böyle bir controller oluşturduğunuzda bize kaça böleceğimizi ve içinde neler olacağını söylüyor. Burada gördüğünüz gibi bizden sütunlar için GridItem tipinde dizi istiyor. Burada ben 4 adet sütuna böleceğim için 4 adet GridItem oluşturuyorum. GridItem hakkında daha fazla bilgi içeren bir yazı yazacağım yakında. Onu da buradan takip edebilirsiniz.

4 adet GridItem oluşturduktan sonra içerik kısmında geçiyorum. Burada çok fazla controller kullanabilirsiniz. Örnek veriyorum sadece ekranın boyutuna göre değişen resimler koymak isterseniz, 4 adet Image oluşturmanız yeterli. Bunların sırasına göre ekrana yerleştiriyor. Burada ben listeye bağlı çok fazla değişken olabileceği için ForEach ile yapıyorum. Burada model de gönderebilirsiniz. Basit olması açısından ben for ile dönüp ekrana sadece Text koydum. İçeriğini dilediğiniz gibi doldurabilirsiniz.

Sorularınız olursa mail veya yorum atarak ulaşabilirsiniz. İyi çalışmalar.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.