SwiftUI: List
List objesi sayesinde tek bir sütunda birden çok elemanı listeleyebilirsiniz.
Merhaba TurkishKit okuyucuları. 🖖 Bugün SwiftUI’da bulunan List özelliğini konuşacağız. Bu özelliği kullanarak uygulamanıza isim, ülke, hava durumu ve bir çok farklı özelliği barındıran listeler ekleyebilirsiniz. 📝
Ekrana Liste Eklemek
SwiftUI’da herşey gibi, liste eklemek de son derece basittir. 😜 Ekranınızda bir liste oluşturabilmek için tek yazmanız gereken kod aşağıdaki gibidir:
import SwiftUIstruct ContentView: View {
var body: some View {
List {
Text("İstanbul")
Text("Ankara")
Text("İzmir")
Text("Çanakkale")
Text("Bursa")
Text("Adana")
Text("Eskişehir")
Text("Konya")
Text("Adıyaman")
Text("Tekirdağ")
}
}
}
Evet, liste oluşturup uygulamanıza eklemek bu kadar kolay. 👾 Ekran simülasyonunu çalıştırdığınızda sonuç aşağıdaki gibi olur.
Listeye Renk Katmak 🎨
Elimizde olan liste biraz sıkıcı ve basit gözüküyor. Bunu güzelleştirebilmek için kodunuza eklemeler yapabilirsiniz.
Mesela şehirlerdeki insan yoğunluklarını gösteren bir uygulama yapmak istiyorsunuz diyelim. 🌃 Şehirlerin yanına tenha, orta ve kalabalık yazabilirsiniz. Ancak bu yazılar şehirler ile aynı renkte olursa uygulamanız hiç güzel gözükmez.
Listedeki şehirlerin yanına gösterge ekleyebilmek için ve eklediğiniz göstergeleri renkli yapabilmek için aşağıdaki kodu yazmanız yeterli olacaktır:
import SwiftUIstruct ContentView: View {
var body: some View {
List {
HStack {
Text("İstanbul")
Text("Kalabalık").foregroundColor(.red)
}
HStack {
Text("Ankara")
Text("Kalabalık").foregroundColor(.red)
}
HStack {
Text("İzmir")
Text("Kalabalık").foregroundColor(.red)
}
HStack {
Text("Çanakkale")
Text("Orta").foregroundColor(.blue)
}
HStack {
Text("Bursa")
Text("Orta").foregroundColor(.blue)
}
HStack {
Text("Adana")
Text("Orta").foregroundColor(.blue)
}
HStack {
Text("Eskişehir")
Text("Tenha").foregroundColor(.green)
}
HStack {
Text("Konya")
Text("Tenha").foregroundColor(.green)
}
HStack {
Text("Adıyaman")
Text("Tenha").foregroundColor(.green)
}
HStack {
Text("Tekirdağ")
Text("Tenha").foregroundColor(.green)
}
}
}
}
Yukarıdaki kodda tek değiştirdiğimiz şey HStack ekleyip şehirlerin yanına kalabalıklık durumunu yazmak ve bu duruma .foregroundColor(.green) özelliğini kullanarak renk eklemek. Bu şekilde listeniz biraz daha ilginç gözükür. 😊
Array ile Liste Yaratmak
Fark ettiğiniz üzere listeler uzun olduğunda her bir eleman için bir HStack eklemek zor olur. 😕 Bunu çözebilmek için array kullanarak liste yaratabiliriz.
import SwiftUIstruct Sehir {
let ad: String
let durum: String
let renk: Color
}struct ContentView: View {
var sehirListesi = [
Sehir(ad: "Istanbul", durum: "Kalabalık", renk: .red),
Sehir(ad: "Ankara", durum: "Kalabalık", renk: .red),
Sehir(ad: "İzmir", durum: "Kalabalık", renk: .red),
Sehir(ad: "Çanakkale", durum: "Orta", renk: .blue),
Sehir(ad: "Bursa", durum: "Orta", renk: .blue),
Sehir(ad: "Adana", durum: "Orta", renk: .blue),
Sehir(ad: "Eskişehir", durum: "Tenha", renk: .green),
Sehir(ad: "Konya", durum: "Tenha", renk: .green),
Sehir(ad: "Adıyaman", durum: "Tenha", renk: .green),
Sehir(ad: "Tekirdağ", durum: "Tenha", renk: .green)
] var body: some View {
List(sehirListesi, id: \.ad) { sehir in
HStack {
Text(sehir.ad)
Text(sehir.durum).foregroundColor(sehir.renk)
}
}
}
}
Böylece hem kodumuz basitleşmiş olur hem de aynı listeyi tek bir kod parçası ile kodlayabilmiş olduk. Listeyi oluşturduğumuz yerdeki id özelliği, listemize hangi elemanın ekleneceğini belirleyen ve ayırt eden özelliktir. Yani listemize eklenen şehirlerin durumları şehirlerin adlarına göre bilgisayar tarafından ayırt edilmektedir. Eğer (imkansız olabilir ama 🥴) iki tane aynı adı taşıyan şehir olabilseydi, id değerine .ad yerine başka bir özelliği atamak gerekirdi.
Listeye Eleman Eklemek
Artık bu kadar kısalttığımıza göre kodlarımızı, listemize daha fazla şehir ekleyebilmek için bir buton kodlayabiliriz. 😄 Bunun için öncellikle eklediğimiz şehirlerin sehirListesi array’ine eklendiğine emin olmalıyız. Bu yüzden sehirListesi array’inin başına @State ekleyelim.
struct ContentView: View {
@State var sehirListesi = [Listemize daha fazla şehir ekleyebilmek için tabii ki bir fonksiyon yazmamız gerektir. Bu fonksiyon, şimdilik sehirListesi dizisinden bir şehir seçip sırasız bir şekilde başta yarattığımız listeye yeni bir eleman olarak ekleyecektir.
var body: some View {
List(sehirListesi, id: \.ad) { sehir in
HStack {
Text(sehir.ad)
Text(sehir.durum).foregroundColor(sehir.renk)
}
}
}func sehirEkle() {
if let randomSehir = sehirListesi.randomElement() {
sehirListesi.append(randomSehir)
}
}
Fonksiyondan sonra uygulamamızın daha güzel gözükebilmesi için listemizin adını NavigationView gösterelim. 🎭 Hazır navigation konusu ile uğraşıyorken bir de sağ üste oluşturduğumuz sehirEkle() fonksiyonunu çalıştırmak için bir buton ekleyelim.
List(sehirListesi, id: \.ad) { sehir in
HStack {
Text(sehir.ad)
Text(sehir.durum).foregroundColor(sehir.renk)
}
}
.navigationBarTitle(Text("Şehirler"))
.navigationBarItem(Button(action: sehirEkle, label: {
Text("Ekle")
}))Navigation hakkındaki tüm değişiklikleri destekleyebilmek için oluşturduğumuz listeyi bir NavigaitonView içine alalım.
NavigationView {
List(sehirListesi, id: \.ad) { sehir in
HStack {
Text(sehir.ad)
Text(sehir.durum).foregroundColor(sehir.renk)
}
}
.navigationBarTitle(Text("Şehirler"))
.navigationBarItem(Button(action: sehirEkle, label: {
Text("Ekle")
}))
}Uygulamanızı çalıştırdığınızda aşağıdaki gibi gözükecektir:
Sonuç kodunuz aşağıdaki gibi olmalıdır:
import SwiftUIstruct Sehir {
let ad: String
let durum: String
let renk: Color
}struct ContentView: View {
@State var sehirListesi = [
Sehir(ad: "Istanbul", durum: "Kalabalık", renk: .red),
Sehir(ad: "Ankara", durum: "Kalabalık", renk: .red),
Sehir(ad: "İzmir", durum: "Kalabalık", renk: .red),
Sehir(ad: "Çanakkale", durum: "Orta", renk: .blue),
Sehir(ad: "Bursa", durum: "Orta", renk: .blue),
Sehir(ad: "Adana", durum: "Orta", renk: .blue),
Sehir(ad: "Eskişehir", durum: "Tenha", renk: .green),
Sehir(ad: "Konya", durum: "Tenha", renk: .green),
Sehir(ad: "Adıyaman", durum: "Tenha", renk: .green),
Sehir(ad: "Tekirdağ", durum: "Tenha", renk: .green)
] var body: some View {
NavigationView {
List(sehirListesi, id: \.ad) { sehir in
HStack {
Text(sehir.ad)
Text(sehir.durum).foregroundColor(sehir.renk)
}
}
.navigationBarTitle(Text("Şehirler"))
.navigationBarItem(Button(action: sehirEkle,label: {
Text("Ekle")
}))
}
} func sehirEkle() {
if let randomSehir = sehirListesi.randomElement() {
sehirListesi.append(randomSehir)
}
}
}
Uygulamanızı Bir Adım İleri Taşıyın!
Bu fonksiyonları listenizi tam anlamıyla tamamladıysanız ve uygulamanıza bir heyecan katmak istediğinizde kullanabilirsiniz.😜
ForEach: Listelerinizin herhangi bir cihaza uydurulmasını sağlar. Uygulamanızı Apple cihazlarının farklı modellerine göre şekillendirir. Uygulamanızın ekranda düzgün bir şekilde yansıtılmasını sağlar.
Aşağıdaki gibi kullanılır:
struct LandmarkList_Previews: PreviewProvider {
static var previews: some View {
ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) {
deviceName in LandmarkList()
.previewDevice(PreviewDevice(rawValue: deviceName))
}
}
}ListStyle: Listenizin görüntüsünü ve düzenini belirleyen bir protocol. Alt elemanları, yani listenizin stilleri, şunlardır: CarouselListSytle, DefaultListStyle, EllipticalListStyle, GroupedListStyle, InsetGroupedListStyle, InsetListStyle, PlainListStyle, SidebarListStyle.
Aşağıdaki gibi kullanılır:
.listStyle(GroupedListStyle())Bir makalenin daha sonuna geldik! 🥳 🎊 Bu makalede SwiftUI’da nasıl listeler oluşturulabileceğini ve bu listelerin farklı özelliklerini konuştuk. Listeleri daha iyi anlayabilmek için şehirlerin nüfusunu gösteren bir uygulama yaptık. Bu uygulamayı daha geliştireceğiniz farklı uygulamalara referans olarak alabilmek için kaydedebilirsiniz! İyi kodlamalar! 😜
