组合 + SwiftUI Form + RunLoop 导致表格视图渲染不可预测

2023-11-29

我有一个组合函数,用于搜索项目列表并返回匹配项。它不仅跟踪向用户显示哪些与搜索词匹配的项目,还跟踪哪些项目已被用户标记为“选择”。

该功能运行良好,包括动画,直到我添加.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
}


处理异步处理的问题...在默认情况下,所有操作都是同步执行的一内(!)动画块,所以一切正常。但在第二种情况下(通过在发布者链中引入任何调度程序),一些启动动画的操作是同步执行的(例如删除),但是当动画已经在进行时,来自发布者的操作是异步进行的,并且更改模型会破坏正在运行的动画不可预测的结果。

解决这个问题的可能方法是通过不同的块分离启动和结果操作,并使发布者 chan 真正异步,但在后台处理并在主队列中检索结果。

这是修改后的发布者链。使用 Xcode 12.4 / iOS 14.4 进行测试

注意:您还可以研究将所有内容再次包装在一个动画块中的可能性,但已经在synk检索结果后 - 这将需要更改逻辑,因此仅供考虑

enter image description here

private func setupPipeline() {
    filterCancellable =
        Publishers.CombineLatest($searchTerm,$chosenItems)
        .debounce(for: .seconds(0.5), scheduler: DispatchQueue.main)   // debounce input
        .subscribe(on: DispatchQueue.global(qos: .background))         // prepare for processing in background
        .print()
        .map { (term,chosen) -> (filtered: [DItem],chosen: Set<DItem>) 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
        }
        .receive(on: DispatchQueue.main) // << receive processed items on main queue
        .sink { [weak self] (filtered, chosen) in
            withAnimation {
                self?.filteredItems = filtered      // animating this as well
                }
        }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

组合 + SwiftUI Form + RunLoop 导致表格视图渲染不可预测 的相关文章

随机推荐