I have a list with items which are pulled from a firebase database. I would like individual counters for each item but one variable isn't doing this for me and is adding 1 to each item on the list. Picture attached to show.
Code I have:
struct DrinksMenuView: View {
@State var quantityItem: Int = 0
var body: some View {
List (menumodel.list) { item in
VStack{
HStack{
VStack {
Text(item.id)
.frame(maxWidth: .infinity, alignment: .leading)
Text("123 kcal, 330ml")
.font(.caption)
.foregroundStyle(Color.gray)
.frame(maxWidth: .infinity, alignment: .leading)
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.vertical)
HStack{
Button {
if quantityItem > 0 {
self.quantityItem -= 1
}
}label: {
Image(systemName: "minus.circle")
.tint(Color.black)
}
Text("\(quantityItem)")
Button {
self.quantityItem += 1
}label: {
Image(systemName: "plus.circle")
.tint(Color.black)
}
}.frame(maxWidth: .infinity, alignment: .trailing)
.padding(.all)
}
}
}
.listStyle(GroupedListStyle())
.buttonStyle(BorderlessButtonStyle())
}
}
#Preview {
DrinksMenuView()
}
you need to use a dictionary to count items on each list
@State private var quantities: [String: Int] = [:]
Change your buttons as the following:
HStack {
Button {
decrementQuantity(for: item.id)
} label: {
Image(systemName: "minus.circle")
.tint(Color.black)
}
Text("\(quantities[item.id, default: 0])")
Button {
incrementQuantity(for: item.id)
} label: {
Image(systemName: "plus.circle")
.tint(Color.black)
}
}
.frame(maxWidth: .infinity, alignment: .trailing)
.padding(.all)
then use these:
private func incrementQuantity(for id: String) {
quantities[id, default: 0] += 1
}
private func decrementQuantity(for id: String) {
if let currentCount = quantities[id], currentCount > 0 {
quantities[id]! -= 1
}
}