article

Wednesday, April 13, 2022

SwiftUI how to implement infinite scrolling with view details

SwiftUI how to implement infinite scrolling with view details

ContentView.swift
 
//
//  ContentView.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//

import SwiftUI
 
struct ContentView: View {
    
    @ObservedObject var sc = SourceCountry()
    @State var nextIndex = 1
    
    init() {
        sc.getCountry(at: 0)
    }
    
    @State var show = false
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVStack(alignment: .leading) {
                    ForEach(sc.countries.indices, id: \.self) { countryIndex in
                        let country = sc.countries[countryIndex]
                        
                        NavigationLink(destination: DetailsView(viewdata: Country(id: country.id, emoji: country.emoji, name: country.name))) {
                            
                            VStack {
                                Text(country.name)
                                    .font(.title)
                                    .fontWeight(.bold)
                                
                                Text("\(country.emoji)")
                                    .font(.system(size: 200))
                                    .padding(.horizontal)
                                    .onAppear {
                                        if countryIndex == sc.countries.count - 3 {
                                            sc.getCountry(at: nextIndex)
                                            nextIndex += 1
                                        }
                                    }
                            }
                        }
                    }
                }
                .padding()
            }
            .navigationTitle("Country")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Model.swift
 
//
//  Model.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//

import SwiftUI

struct Country: Identifiable {
    let id: Int
    let emoji: String
    let name: String
}

class SourceCountry: ObservableObject {
    
    @Published var countries = [Country]()
    
    func getCountry(at index: Int) {
        
        print("page", index)
        
        switch index {
        case 0:
            countries.append(contentsOf: [
                Country(id: 1, emoji: "🇦🇩", name: "AD"),
                Country(id: 2, emoji: "🇦🇪", name: "AE"),
                Country(id: 3, emoji: "🇦🇫", name: "AF"),
                Country(id: 4, emoji: "🇦🇬", name: "AG"),
                Country(id: 5, emoji: "🇦🇮", name: "AI"),
                Country(id: 6, emoji: "🇦🇱", name: "AL"),
                Country(id: 7, emoji: "🇦🇲", name: "AM"),
                Country(id: 8, emoji: "🇦🇴", name: "AO"),
                Country(id: 9, emoji: "🇦🇶", name: "AQ"),
                Country(id: 10, emoji: "🇦🇷", name: "AR")
            ])
            
        case 1:
            countries.append(contentsOf: [
                Country(id: 11, emoji: "🇦🇸", name: "AS"),
                Country(id: 12, emoji: "🇦🇹", name: "AT"),
                Country(id: 13, emoji: "🇦🇺", name: "AU"),
                Country(id: 14, emoji: "🇦🇼", name: "AW"),
                Country(id: 15, emoji: "🇦🇽", name: "AX"),
                Country(id: 16, emoji: "🇦🇿", name: "AZ"),
                Country(id: 17, emoji: "🇧🇦", name: "BA"),
                Country(id: 18, emoji: "🇧🇧", name: "BB"),
                Country(id: 19, emoji: "🇧🇩", name: "BD"),
                Country(id: 20, emoji: "🇧🇪", name: "BE")
            ])
            

            
        case 2:
            countries.append(contentsOf: [
                Country(id: 21, emoji: "🇧🇫", name: "BF"),
                Country(id: 22, emoji: "🇧🇬", name: "BG"),
                Country(id: 23, emoji: "🇧🇭", name: "BH"),
                Country(id: 24, emoji: "🇧🇮", name: "BI"),
                Country(id: 25, emoji: "🇧🇯", name: "BJ"),
                Country(id: 26, emoji: "🇧🇱", name: "BL"),
                Country(id: 27, emoji: "🇧🇲", name: "BM"),
                Country(id: 28, emoji: "🇧🇳", name: "BN"),
                Country(id: 29, emoji: "🇧🇴", name: "BO"),
                Country(id: 30, emoji: "🇧🇶", name: "BQ")
            ])
            
        case 3:
            countries.append(contentsOf: [
                Country(id: 31, emoji: "🇧🇷", name: "BR"),
                Country(id: 32, emoji: "🇧🇸", name: "BS"),
                Country(id: 33, emoji: "🇧🇹", name: "BT"),
                Country(id: 34, emoji: "🇧🇻", name: "BV"),
                Country(id: 35, emoji: "🇧🇼", name: "BW"),
                Country(id: 36, emoji: "🇧🇾", name: "BY"),
                Country(id: 37, emoji: "🇧🇿", name: "BZ"),
                Country(id: 38, emoji: "🇨🇦", name: "CA"),
                Country(id: 39, emoji: "🇨🇨", name: "CC"),
                Country(id: 40, emoji: "🇨🇩", name: "CD")
            ])
            
        default:
            break
        }
    }
}
DetailsView.swift
 
//
//  DetailsView.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//

import SwiftUI

struct DetailsView: View {
    
    var viewdata: Country
    
    var body: some View {
        VStack {
            Text("\(viewdata.emoji) \(viewdata.name)")
                .font(.system(size: 200))
                .padding(.horizontal)
        }
    }
}

struct DetailsView_Previews: PreviewProvider {
    static var previews: some View {
        DetailsView(viewdata: Country(id: 1, emoji: "🇦🇩", name: "Ph"))
    }
}

Related Post