The logic of clicking like in SwiftUI

Question

world! I want to make sure that the like is placed only on one card, and not on all at once. I wrote the logic of painting the like and clicking it. But this applies to all cards, not just the one where I clicked like.

How can I change the logic so that the like is placed only on the card I clicked on?

Below the code CellView() is a cell with a card, which I then use in another view

struct CellView: View{
    //MARK: - PROPERTIES
    
    @AppStorage("isLiked") var isLiked: Bool = false

    var data: Model
    
    //MARK: - BODY
    var body: some View{
        VStack{
            VStack{
                AnimatedImage(url: URL(string: data.photo)!)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                    .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color("GrayWhite"), lineWidth: 0.5)
                    )
            }.background(Color.white)
                .cornerRadius(10)
            
            
            VStack{
                HStack{
                    
                    Text("\(data.price) ₽")
                        .font(.system(size: 16, weight: .bold))
                        .foregroundColor(Color("BlackWhite"))
                    
                    Spacer()
                    
                    Button(action: {
                            self.isLiked.toggle()
                    }, label: {
                        Image(systemName: isLiked ? "heart.fill" : "heart")
                            .frame(width: 22, height: 22)
                            .foregroundColor(isLiked ? .red : .black)
                    })
                }.padding(.bottom, 1)
                
                HStack{
                    Text(data.company)
                        .font(.system(size: 14, weight: .bold))
                        .lineLimit(1)
                        .foregroundColor(Color("BlackWhite"))
                    Spacer()
                }
                
                HStack{
                    Text(data.name)
                        .font(.system(size: 14, weight: .bold))
                        .lineLimit(1)
                        .foregroundColor(.gray)
                    Spacer()
                }
            }
            .padding(.horizontal, 2)
        }
        .padding(5)  
    }
}

Thank you in advance for your help

user_13302643 · Answer

Each cell has to be identified for Swift to know what is liked.

import SwiftUI

struct CardData: Identifiable {
    var id: String = UUID().uuidString
    
    // add the rest of the data associated with the cards, company, etc.
    
}

And if we want to follow the MVVM-structure you create a separate file for the functions (when we check like and unlike each card).

class CellViewModel: ObservableObject {
    
    @Published var card: CardData!
    @Published var isLiked = false
    
    func like() {
        isLiked.toggle()
    }
    
  
    
  
}

Now all our CellViews can be liked seperately (I removed some your inputs, for test)

struct CellView: View{
    //MARK: - PROPERTIES
    
    
    @ObservedObject var cellViewModel: CellViewModel = CellViewModel()
    
    init(cardData: CardData) {
        self.cellViewModel.card = cardData
        
    }

    
    //MARK: - BODY
    var body: some View{
        VStack{
            VStack{
                Image(systemName: "circle")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                    .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color("GrayWhite"), lineWidth: 0.5)
                    )
            }.background(Color.white)
                .cornerRadius(10)
            
            
            VStack{
                HStack{
                    
                    Text(" ₽")
                        .font(.system(size: 16, weight: .bold))
                        .foregroundColor(Color("BlackWhite"))
                    
                    Spacer()
                    
                    Button(action: {
                        cellViewModel.like()
                    }, label: {
                        Image(systemName: cellViewModel.isLiked ? "heart.fill" : "heart")
                            .frame(width: 22, height: 22)
                            .foregroundColor(cellViewModel.isLiked ? .red : .black)
                    })
                }.padding(.bottom, 1)
                
                HStack{
                    Text("company")
                        .font(.system(size: 14, weight: .bold))
                        .lineLimit(1)
                        .foregroundColor(Color("BlackWhite"))
                    Spacer()
                }
                
                HStack{
                    Text("name")
                        .font(.system(size: 14, weight: .bold))
                        .lineLimit(1)
                        .foregroundColor(.gray)
                    Spacer()
                }
            }
            .padding(.horizontal, 2)
        }
        .padding(5)
    }
}

Testing liking seperately:

struct ContentView: View {
    
    
    var body: some View {
        
        VStack {
            CellView(cardData: CardData())
            CellView(cardData: CardData())
            CellView(cardData: CardData())
            CellView(cardData: CardData())
            
        }
        
    }
}

The logic of clicking like in SwiftUI

1 Answers