如何在SwiftUI上为每个ForEach项目更改单个按钮图标



当在我的ForEach中单击时,我正试图将每个单独的项目按钮从购物车图标更改为不同的图标。但当我点击一个按钮时,每个按钮的图标都会改变。我该怎么解决这个问题?

非常感谢

@StateObject var vm = ShopViewModel()
@State var isShowing = false
@State var cartItemCount = 0
@State var itemCart = false
var body: some View {
NavigationView {


ScrollView(/*@START_MENU_TOKEN@*/.vertical/*@END_MENU_TOKEN@*/, showsIndicators: false) {
VStack {
ForEach(vm.foods) { food in
HStack {
NavigationLink(
destination: DetailView(foody: food, isCanceled: $isShowing),
label: {
Image(food.imageURL)
.resizable()
.frame(width: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/)
Text(food.name)
.bold()


Spacer()
Text("$(food.price)").padding()


}).foregroundColor(.black)
Spacer()
Button(action: {
cartItemCount += 1

}, label: {
Image(systemName: "cart")
.frame(width: 70, height: 50)
.background(Color("yColor"))
.cornerRadius(30)

}).padding(.trailing, 30)

}.padding(.leading, 20)

}
}.padding(.top, 30)
}

.navigationTitle("Falco Shop")
.navigationBarItems(trailing: CartIcon(cartItemCount: $cartItemCount).padding(.top, 90).padding())
}

}

以下是如何做到这一点的示例:

import SwiftUI
struct ContentView: View {

@StateObject var vm = ShopViewModel()
@State var isShowing = false
@State var cartItemCount = 0
@State var itemCart = false

var body: some View {
NavigationView {


ScrollView(.vertical, showsIndicators: false) {
VStack {
ForEach(vm.foods.indices, id:.self) { index in
HStack {
Text(vm.foods[index].name)
Spacer()
Button(action: {
cartItemCount += 1
vm.foods[index].selected.toggle()

}, label: {

Image(systemName: vm.foods[index].selected ? "cart.fill" : "cart")
.frame(width: 70, height: 50)
.background(Color("yColor"))
.cornerRadius(30)

}).padding(.trailing, 30)

}.padding(.leading, 20)

}
}.padding(.top, 30)
}
.navigationTitle("Falco Shop")

}

}
}

class ShopViewModel: ObservableObject {
@Published var foods: [Food] = [Food(name: "apple", price: 2.0, selected: false, imageURL: "apple")]
}

struct Food: Identifiable {
let id: UUID = UUID()
var name: String
var price: Double
var selected: Bool
var imageURL: String
}

最新更新