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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//
//  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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
//
//  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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//
//  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"))
    }
}

Posted by ednalan at 12:49 AM . Under .

Related Post