SwiftUI ile List kullanımı

Merhabalar bu yazımda SwiftUI ile List ve NavigationBar kullanımını göstereceğim. Bu yapı UIKit içerisinde UITableView ve UINavigationBar yapısına karşılık geliyor.

UIKit ile uğraştığımız Delegate,DataSource gibi yapılar ile uğraşmadan hızlı bir şekilde tablomuzu listeleyebilir ve kolay bir şekilde sayfamıza NavigationBar ekleyebilirsiniz.

İlk önce listeleyeceğimiz model yapısını oluşturalım.

struct CityModel: Identifiable {
    var id:Int
    var name:String
}

struct CityModel: Identifiable {

var id:Int

var name:String

}

Model yapımıza Identifiable eklediğimiz zaman istediğimiz değişkene göre sıralama işlemi yapabiliyoruz.

Daha sonrasında Listemizdeki sutun için tasarımımızın bulunduğu bir view yaratıp, kodlarımızı orda yazıyoruz.

struct CustomRow: View {
    
    var city: CityModel
    
    var body: some View {
        HStack {
            Image(uiImage: UIImage(named: "img.jpg")!)
                .frame(width: 32, height: 32, alignment: .center)
                .clipShape(Circle())
            Text(city.name)
                .bold()
                .padding(.leading, 10)
        }
    }
}

struct CustomRow: View {

var city: CityModel

var body: some View {

HStack {

Image(uiImage: UIImage(named: "img.jpg")!)

.frame(width: 32, height: 32, alignment: .center)

.clipShape(Circle())

Text(city.name)

.bold()

.padding(.leading, 10)

}

Daha sonrasında ana sayfamızda listemizi oluşturup, burada sutun view yapımızı listeliyoruz.

struct CustomView:View {
    
    let citys = [CityModel(id: 0, name: "San Francisco"), CityModel(id: 1, name: "New York"),CityModel(id: 2, name: "Miami"),CityModel(id: 3, name: "Las Vegas")]
    
    var body: some View {
        NavigationView {
            List(citys.identified(by: \.id)) { city in
                CustomRow(city: city)
                }
                .navigationBarTitle(Text("Citys"), displayMode: .large)
        }
    }
}

struct CustomView:View {

let citys = [CityModel(id: 0, name: "San Francisco"), CityModel(id: 1, name: "New York"),CityModel(id: 2, name: "Miami"),CityModel(id: 3, name: "Las Vegas")]

var body: some View {

NavigationView {

List(citys.identified(by: \.id)) { city in

CustomRow(city: city)

}

.navigationBarTitle(Text("Citys"), displayMode: .large)

}

SwiftUI ile List kullanımı

İlk Yorumu Siz Yapın

Bir cevap yazın Cevabı iptal et