我有一个组合函数,用于搜索项目列表并返回匹配项。它不仅跟踪向用户显示哪些与搜索词匹配的项目,还跟踪哪些项目已被用户标记为“选择”。
该功能运行良好,包括动画,直到我添加.debounce(for: .seconds(0.2), scheduler: RunLoop.main)
or .receive(on: RunLoop.main)
在联合出版商链中。此时,结果的呈现View
变得莫名其妙地奇怪——项目标题开始显示为标题视图、项目重复等等。
您可以在随附的 GIF 中查看结果。
GIF版本正在使用.receive(on: RunLoop.main)
。请注意,我什至没有在这里使用搜索词,尽管它also导致有趣的结果。还值得注意的是,一切正常with问题线如果withAnimation { }
已移除。
我希望能够使用debounce
因为列表最终可能会非常大,并且我不想在每次击键时过滤整个列表。
在这种情况下如何使表格视图正确呈现?
示例代码(请参阅内联注释以了解代码的难点和解释。它应该按编写的方式运行良好,但如果两行相关行中的任何一行未注释):
import SwiftUI
import Combine
import UIKit
class Completer : ObservableObject {
@Published var items : [Item] = [] {
didSet {
setupPipeline()
}
}
@Published var filteredItems : [Item] = []
@Published var chosenItems: Set<Item> = []
@Published var searchTerm = ""
private var filterCancellable : AnyCancellable?
private func setupPipeline() {
filterCancellable =
Publishers.CombineLatest($searchTerm,$chosenItems) //listen for changes of both the search term and chosen items
.print()
// ** Either of the following lines, if uncommented will cause chaotic rendering of the table **
//.receive(on: RunLoop.main) //<----- HERE --------------------
//.debounce(for: .seconds(0.2), scheduler: RunLoop.main) //<----- HERE --------------------
.map { (term,chosen) -> (filtered: [Item],chosen: Set<Item>) in
if term.isEmpty { //if the term is empty, return everything
return (filtered: self.items, chosen: chosen)
} else { //if the term is not empty, return only items that contain the search term
return (filtered: self.items.filter { $0.name.localizedStandardContains(term) }, chosen: chosen)
}
}
.map { (filtered,chosen) in
(filtered: filtered.filter { !chosen.contains($0) }, chosen: chosen) //don't include any items in the chosen items list
}
.sink { [weak self] (filtered, chosen) in
self?.filteredItems = filtered
}
}
func toggleItemChosen(item: Item) {
withAnimation {
if chosenItems.contains(item) {
chosenItems.remove(item)
} else {
searchTerm = ""
chosenItems.insert(item)
}
}
}
}
struct ContentView: View {
@StateObject var completer = Completer()
var body: some View {
Form {
Section {
TextField("Term", text: $completer.searchTerm)
}
Section {
ForEach(completer.filteredItems) { item in
Button(action: {
completer.toggleItemChosen(item: item)
}) {
Text(item.name)
}.foregroundColor(completer.chosenItems.contains(item) ? .red : .primary)
}
}
if completer.chosenItems.count != 0 {
Section(header: HStack {
Text("Chosen items")
Spacer()
Button(action: {
completer.chosenItems = []
}) {
Text("Clear")
}
}) {
ForEach(Array(completer.chosenItems)) { item in
Button(action: {
completer.toggleItemChosen(item: item)
}) {
Text(item.name)
}
}
}
}
}.onAppear {
completer.items = ["Chris", "Greg", "Ross", "Damian", "George", "Darrell", "Michael"]
.map { Item(name: $0) }
}
}
}
struct Item : Identifiable, Hashable {
var id = UUID()
var name : String
}