SwiftUI中如何为Firebase列表项创建独立计数器变量？

问题核心：你用了单个@State变量quantityItem，所有列表项共享这个状态，导致点击加减按钮时所有项计数同步变化。要实现每个项独立计数，推荐以下两种方案：

方案一：创建独立子视图（最直观） #

给每个列表项单独创建子视图，让子视图持有自己的计数状态，实现完全独立的状态管理。

修改后的代码：

// 单个饮品项的子视图
struct DrinkItemView: View {
    let item: MenuItem // 替换为你实际的模型类型
    @State private var quantity = 0
    
    var body: some View {
        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 quantity > 0 {
                        quantity -= 1
                    }
                } label: {
                    Image(systemName: "minus.circle")
                        .tint(Color.black)
                }
                Text("\(quantity)")
                Button {
                    quantity += 1
                } label: {
                    Image(systemName: "plus.circle")
                        .tint(Color.black)
                }
            }
            .frame(maxWidth: .infinity, alignment: .trailing)
            .padding(.all)
        }
    }
}

// 父视图
struct DrinksMenuView: View {
    var body: some View {
        List(menumodel.list) { item in
            DrinkItemView(item: item)
        }
        .listStyle(GroupedListStyle())
        .buttonStyle(BorderlessButtonStyle())
    }
}

#Preview {
    DrinksMenuView()
}

方案二：用字典存储每个项的计数（适合全局管理场景） #

如果需要在父视图中统一管理所有项的计数，比如统计总数量、提交订单等，可以用字典映射每个item的id和对应数量，实现独立存储。

修改后的代码：

struct DrinksMenuView: View {
    // 字典存储每个item的计数，key为item的id，value为当前数量
    @State private var itemQuantities: [String: Int] = [:]
    
    var body: some View {
        List(menumodel.list) { item in
            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 {
                        let currentCount = itemQuantities[item.id] ?? 0
                        if currentCount > 0 {
                            itemQuantities[item.id] = currentCount - 1
                        }
                    } label: {
                        Image(systemName: "minus.circle")
                            .tint(Color.black)
                    }
                    Text("\(itemQuantities[item.id] ?? 0)")
                    Button {
                        let currentCount = itemQuantities[item.id] ?? 0
                        itemQuantities[item.id] = currentCount + 1
                    } label: {
                        Image(systemName: "plus.circle")
                            .tint(Color.black)
                    }
                }
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.all)
            }
        }
        .listStyle(GroupedListStyle())
        .buttonStyle(BorderlessButtonStyle())
    }
}

#Preview {
    DrinksMenuView()
}

说明：

• 方案一适合无需全局管理计数的场景，代码简洁，状态隔离彻底。
• 方案二适合需要统一统计、操作所有项计数的场景，方便后续扩展功能。

内容的提问来源于stack exchange，提问作者Benjamin Young