SwiftUI ile ScrollView kullanımı

Merhabalar bu yazımda SwiftUI ile ScrollView kullanarak UIKit içerisinde kullandığımız CollectionView yapısını oluşturacağız. Bunun yanı sıra aksiyon vererek farklı bir sayfaya Pass data işleminin nasıl gerçekleştiğini öğrenmiş olacaksınız.

SwiftUI içerisinde CollectionView yapısına karşılık gelen bir yapı yok. Bu yapıyı daha basit ve kolay bir şekilde ScrollView yardımı ile oluşturup kullanıyoruz.

Aşağıda yazdığım örnek ile kullanımını görelim.

struct Citys: Identifiable {
    var id:Int
    var name:String
    var image:Image
}

struct CustomRow: View {
    
    var city:Citys
    
    var body: some View {
        VStack(alignment: .leading) {
            city.image
            .renderingMode(.original)
            .frame(width: 120, height: 120)
            .cornerRadius(10)
            Text(city.name)
            .color(.primary)
            .font(.caption)
        }
        .padding(.leading, 10)
        .padding(.trailing, 10)
    }
}

ScrollView içerisinde kullanacağımız CustomRow yapımızı kolay bir şekilde oluşturduk.

struct CustomView:View {
    
    let citys = [Citys(id: 0, name: "New York", image: Image(uiImage: UIImage(named: "img.jpg")!)),
    Citys(id: 1, name: "San Francisco", image: Image(uiImage: UIImage(named: "img.jpg")!)),
    Citys(id: 2, name: "Las Vegas", image: Image(uiImage: UIImage(named: "img.jpg")!)),
    Citys(id: 3, name: "Los Angelas", image: Image(uiImage: UIImage(named: "img.jpg")!))]
    
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                Text("Citys")
                .font(.headline)
                .padding(.leading, 15)
                ScrollView(showsHorizontalIndicator: false) {
                    HStack(alignment: .top, spacing: 0) {
                        ForEach(citys.identified(by: \.name)) { city in
                            NavigationButton(destination: XView(cityName: city.name)) {
                                CustomRow(city: city)
                            }
                        }
                    }
                }
                .frame(height: 180)
            }
        }
    }
}

Daha sonrasında ana sayfamızda ScrollView içerisinde sutunlarımızı listeliyoruz. Ve diğer sayfaya pass işlemi için NavigationButton kullanmamız gerekli.

struct XView: View {
    
    var cityName:String
    
    var body: some View {
        Text(cityName)
    }
}

SwiftUI yapısı içerisinde birden fazla nesne kullanacaksak mutlaka VStack, HStack veya ZStack kullanmamız gerekli. Böylece nesneleri koordinat yapısına göre düzende tutup, aralarındaki boşluk ve tasarımsal düzeni ayarlayabilirsiniz.