0

So I've been trying to create a foreach containing an asyncimage which will later navigate to the detailview when pressed, but when I press the images that don't match the order of the images I have, my images show them in random order. I don't know how to go to detailview with asyncimage according to the order of data in foreach in HistoryView()

import SwiftUI


struct HistoryView: View {
    
    @EnvironmentObject var historyManager : HistoryManager
    @State var isActive : Bool = false
    var body: some View {
        NavigationView{
            let jsonDataList = historyManager.jsondata
            ScrollView{
                VStack{
                    if let response = jsonDataList{
                        
                        //MARK:  diberi reversed agar ketika update maka akan munculnya dari bawah
                        ForEach(response.dataJson.result.check_in.reversed(), id:\.self){ items in
                            
                            ZStack(alignment: .leading){
                                //color changing when late is true
                                if (historyManager.warna == true){
                                    Image("RoundedRectangle-red")
                                        .resizable()
                                        .frame(width: 370, height: 200)
                                }else{
                                    Image("RoundedRectangle-green")
                                        .resizable()
                                        .frame(width: 370, height: 200)
                                }
                                
                                //Image
                                
                                NavigationLink(isActive : $isActive){
                                    DetailImageHistory(isActive: $isActive, name: items.links)
                                } label: {
                                    let url = URL(string: items.links)
                                    AsyncImage(url: url){ image in
                                        image
                                            .resizable()
                                            .scaledToFill()
                                            .frame(width: 45, height: 45)
                                            .clipShape(Circle())
                                        
                                        
                                        
                                    } placeholder: {
                                        ProgressView()
                                            .progressViewStyle(.circular)
                                    }
                                    .frame(width: 45, height: 45)
                                    .clipShape(Circle())
                                    
                                }.offset(x: 300, y: -70)
                                
                                
                                //Content
                                VStack(alignment:.leading, spacing: 2){
                                    Text("Presensi Datang").bold().font(.system(size: 15))
                                    Text("\(items.createdAts)").font(.system(size: 15))
                                    if(historyManager.keteranganKehadiran == true){
                                        Text("Tepat Waktu").fontWeight(.bold).foregroundColor(.white)
                                    }else{
                                        Text("Terlambat").fontWeight(.bold).foregroundColor(.white).font(.system(size: 15))
                                    }
                                    Text("\(items.places)").font(.system(size: 15))
                                    Text("\(items.locations)").multilineTextAlignment(.leading).font(.system(size: 15))
                                    Text("Keterangan: ").bold().font(.system(size: 15))
                                    Text("\(items.tujuans)").bold().font(.system(size: 15))
                                    
                                }.padding(.horizontal)
                                
                            }
                        }
                    }
                }
            }
        }
    }
}

and this is my DetailView


import SwiftUI

struct DetailImageHistory: View {
    @EnvironmentObject var historyManager: HistoryManager
    @Binding var isActive : Bool
    var name : String
    var body: some View {

        let url = URL(string: name)
        AsyncImage(url: url){ image in
            image
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 300, height: 300)
            
        } placeholder: {
            Color.gray
            
        }
        .frame(width: 300, height: 300)

    }
}

UPDATE: my problem is solved i dont know why I'm not changing anything but somehow it is actually worked now lol

Rakha Fatih
  • 31
  • 5
  • You need to use either `NavigationLink(tag` variant (like https://stackoverflow.com/a/63197406/12299030), or move `NavigationLink(isActive` out of `ForEach` and activate it by selection item (like https://stackoverflow.com/a/72696066/12299030 or https://stackoverflow.com/a/72660236/12299030) – Asperi Jun 22 '22 at 07:51
  • To add to @Asperi 's comment, you are creating NavigationLink in a ForEach loop, meaning you are creating a list of them. Problem is: once `isActive` becomes true, you are activating not one, but all of them (since they are all tied to `isActive` and there's now confusion as to which DetailView must be shown). `isActive` variant of NavigationLink IMO is not the right choice for your use case. Better to use the `NavigationLink(tag` variant as suggested above. – technusm1 Jun 22 '22 at 09:28
  • thanks for the adivce im gonna trying it now with tag instead of using isActive – Rakha Fatih Jun 22 '22 at 11:38
  • can you show me how to do it both side on HistoryView and detail View? – Rakha Fatih Jun 22 '22 at 11:58

0 Answers0