SwiftUI - 无法在列表中搜索和切换

Question

我有一个汽车列表，每辆汽车旁边都有一个切换按钮。 顶部还有一个 SearchBar。 目前，当搜索栏为空时，toogle 工作正常。 当我在搜索栏中输入内容时，它既不过滤列表也不切换保持其 position。如何在过滤列表时为每辆车保持切换 position？

例如，如果我 select 没有搜索文本的前三辆车。 现在我开始在搜索栏中输入内容，前三个切换按钮保持启用状态。

struct Car: Identifiable {
    var id = UUID()
    var name: String
    var selected: Bool = false
}
struct ContentView: View {
    @State var cars = [Car(name: "Subaru WRX", selected: false), Car(name:"Tesla Model 3",selected: false), Car(name:"Porsche 911 sjfnewif ewihf dwehifiw eufhwueif uhewfuwe u",selected: false), Car(name:"Renault Zoe",selected: false), Car(name:"DeLorean",selected: false), Car(name:"Mitsubishi Lancer",selected: false), Car(name:"Audi RS6", selected:false),Car(name:"Subaru WRX",selected: false), Car(name:"Tesla Model 3",selected: false), Car(name:"Porsche 911",selected: false), Car(name:"Renault Zoe",selected: false), Car(name:"DeLorean",selected: false), Car(name:"Mitsubishi Lancer",selected: false), Car(name:"Audi RS6", selected:false),
                Car(name:"Subaru WRX",selected: false), Car(name:"Tesla Model 3",selected: false), Car(name:"Porsche 911",selected: false), Car(name:"Renault Zoe",selected: false), Car(name:"DeLorean",selected: false), Car(name:"Mitsubishi Lancer",selected: false), Car(name:"Audi RS6",selected:false),
        Car(name:"Subaru WRX",selected: false), Car(name:"Tesla Model 3",selected: false), Car(name:"Porsche 911",selected: false), Car(name:"Renault Zoe",selected: false), Car(name:"DeLorean",selected: false), Car(name:"Mitsubishi Lancer",selected: false), Car(name:"Audi RS6", selected:false),
        Car(name:"Subaru WRX",selected: false), Car(name:"Tesla Model 3",selected: false), Car(name:"Porsche 911",selected: false), Car(name:"Renault Zoe",selected: false), Car(name:"DeLorean",selected: false), Car(name:"Mitsubishi Lancer",selected: false), Car(name:"Audi RS6", selected: false)]
    @State var showAlert = false
    @State private var searchText : String = ""
    var body: some View {
        NavigationView{
            VStack {
                ScrollView {
                    VStack (alignment: .leading) {
                        SearchBar(text: $searchText, placeholder: "Car name")
                        Button(action: {
                            self.showAlert = true
                            print("Button tapped!")
                        }) {
                            Text("Browse by category").foregroundColor(Color.black).padding(.leading).font(.system(size: 15))
                        }.alert(isPresented: $showAlert) {
                            Alert(title: Text("Your Score"), message: Text("\(self.searchText)"))
                        }
                        ForEach(self.cars.filter {
                            self.searchText.isEmpty ? true : $0.name.lowercased().contains(self.searchText.lowercased())
                        }.indices, id: \.self) { idx in
                            ZStack (alignment: .leading) {
                                RoundedRectangle(cornerRadius: 5, style: .continuous)
                                    .fill(Color.white).shadow(color:.green, radius: 5).padding(.leading).padding(.trailing)
                                HStack {
                                    VStack (alignment: .leading) {
                                        Text(self.cars[idx].name)
                                        CatalogAvailable()
                                    }.padding(.leading).padding(.trailing)
                                    Toggle(isOn: self.$cars[idx].selected) {
                                        Text("")
                                    }.toggleStyle(CheckboxToggleStyle()).labelsHidden()
                                        .frame(width: 10, height: 10, alignment: .trailing).padding()
                                }.padding().frame(maxWidth: .infinity, alignment: .leading)
                                
                            }.onTapGesture {
                                self.cars[idx].selected.toggle()
                            }
                        }
                    }
                }.navigationBarTitle("Add your cars")
                Button(action: {
                    print("Button tapped!")
                }) {
                    Text("Next")
                }.padding(.bottom)
            }
            
        }
    }
}

Answer 1

您遍历indices但在过滤后它们不对应于原始数组，而只是过滤后数组的有序索引。 你必须使用id of cars 来代替

这是一个想法的草图：

ForEach(self.cars.filter {
    self.searchText.isEmpty ? true : $0.name.lowercased().contains(self.searchText.lowercased())
}) { car in
   self.row(for: car)
}

...

func row(for car: Car) -> some View {
  let idx = self.cars.firstIndex(of car)!

  return ZStack (alignment: .leading) {
        RoundedRectangle(cornerRadius: 5, style: .continuous)
            .fill(Color.white).shadow(color:.green, radius: 5).padding(.leading).padding(.trailing)
        HStack {
            VStack (alignment: .leading) {
                Text(self.cars[idx].name)
                CatalogAvailable()
            }.padding(.leading).padding(.trailing)
            Toggle(isOn: self.$cars[idx].selected) {
                Text("")
            }.toggleStyle(CheckboxToggleStyle()).labelsHidden()
                .frame(width: 10, height: 10, alignment: .trailing).padding()
        }.padding().frame(maxWidth: .infinity, alignment: .leading)
        
    }.onTapGesture {
        self.cars[idx].selected.toggle()
    }

}