ios – SwiftUI: How one can obtain and cargo picture in cell view in LazyVGrid with out blocking essential?

[ad_1]

I’ve coded a easy grid to check correct approach of downloading a picture and loading it within the cell with out degrading efficiency in SwiftUI.

I’m not capable of do it so the scrolling stays responsive. My objective is to have the ability to have a responsive scrolling expertise as pictures are downloaded and rendered in every cell.

Can someone assist me perceive how I could make this code work in order that scrolling shouldn’t be affecting by loading pictures?

struct DView: View {
    
    var columnGridItems = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    @State var stuff = [Int]()
    
    
    var physique: some View {
        
        NavigationView {
            
            GeometryReader { geo in
                
                let w = geo.measurement.width / 4
                ScrollView {
                    LazyVGrid(columns: columnGridItems, alignment: .heart, spacing: 2) {
                        
                        ForEach(stuff, id:.self) { s in
                            TestView(i: s)
                                .body(width:w, peak:w)
                                .clipped()
                        }
                    }
                }
                .background(.crimson)
                .onAppear {
                    for i in 0..<100 {
                        stuff.append(i)
                    }
                }
            }
            
        }
        .navigationViewStyle(StackNavigationViewStyle())
        
    }
    
}


struct TestView:View {
    
    @State var i:Int
    @State var picture:UIImage?
    @State var downloadTask:Process<(),Error>?
    
    var physique: some View {
        
        ZStack {
            
            Coloration.black
            
            if let picture = picture {
                Picture(uiImage: picture)
                    .resizable()
                    .scaledToFill()
                    .clipped()
            } else {
                VStack {
                    Spacer()
                    HStack {
                        Spacer()
                        ProgressView().foregroundColor(.grey)
                        Spacer()
                    }
                    Spacer()
                }
            }
            
            
            Textual content("Some Textual content")
                .foregroundColor(.white)
            
        }
        .onAppear {
            let objId = "(i)"
            downloadTask?.cancel()
            downloadTask = Process.indifferent(precedence:.low) {
                let imgData = attempt await downloadTileImage(tag:objId)
                let img = UIImage(knowledge: imgData)
                Process(precedence: .low) { @MainActor in // <-- if I remark this out scrollview stays responsive
                    picture = img
                }
            }
        }
        .onDisappear {
            downloadTask?.cancel()
        }
        
    }
    
}


let f1Image = "https://pictures.igdb.com/igdb/picture/add/t_original/t7kg7iu6e2sv8h0vjcip.jpg"
let tileImageURL = URL(string: f1Image)!

func downloadTileImage(tag:String) async throws -> Information {
    let req = URLRequest(url: tileImageURL)
    attempt Process.checkCancellation()
    let response = attempt await URLSession.shared.knowledge(for: req)
    return response.0
}

[ad_2]

Leave a Reply