微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

SwiftUI:如何仅在用户停止在 TextField 中输入时运行代码?

如何解决SwiftUI:如何仅在用户停止在 TextField 中输入时运行代码?

所以我试图制作一个搜索栏,它不会运行显示结果的代码,直到用户停止输入 2 秒(也就是当用户输入新字符时它应该重置某种计时器)。我尝试使用 .onChange() 和 AsyncAfter dispatchQueue 但它不起作用(我想我明白为什么当前的实现不起作用,但我不确定我什至以正确的方式解决这个问题)...

struct SearchBarView: View {
    @State var text: String = ""
    @State var justUpdatedSuggestions: Bool = false
    var body: some View {
        ZStack {
            TextField("Search",text: self.$text).onChange(of: self.text,perform: { newText in
                appState.justUpdatedSuggestions = true
                dispatchQueue.main.asyncAfter(deadline: .Now() + 3,execute: {
                    appState.justUpdatedSuggestions = false
                })
                if justUpdatedSuggestions == false {
                    //update suggestions
                }
            })
        }
    }
}

解决方法

可能的方法是使用来自 Combine 框架的 debounce。要使用它,最好为搜索文本创建具有已发布属性的分离视图模型。

这是一个演示。使用 Xcode 12.4 / iOS 14.4 准备和测试。

import Combine

class SearchBarViewModel: ObservableObject {
    @Published var text: String = ""
}

struct SearchBarView: View {
    @StateObject private var vm = SearchBarViewModel()
    var body: some View {
        ZStack {
            TextField("Search",text: $vm.text)
                .onReceive(
                    vm.$text
                        .debounce(for: .seconds(2),scheduler: DispatchQueue.main)
                ) {
                    guard !$0.isEmpty else { return }
                    print(">> searching for: \($0)")
                }
        }
    }
}
,

在处理延迟搜索查询调用时,通常使用两种最常用的技术:节流或去抖动。


要在 SwiftUI 中实现这些概念,您可以使用组合框架的节流/去抖动方法。

一个例子如下:

import SwiftUI
import Combine

final class ViewModel: ObservableObject {
    private var disposeBag = Set<AnyCancellable>()

    @Published var text: String = ""

    init() {
        self.debounceTextChanges()
    }

    private func debounceTextChanges() {
        $text
            // 2 second debounce
            .debounce(for: 2,scheduler: RunLoop.main)

            // Called after 2 seconds when text stops updating (stoped typing)
            .sink {
                print("new text value: \($0)")
            }
            .store(in: &disposeBag)
    }
}

struct ContentView: View {
    @ObservedObject var viewModel = ViewModel()

    var body: some View {
        TextField("Search",text: $viewModel.text)
    }
}

您可以在官方文档中阅读有关合并和节流/去抖动的更多信息:throttledebounce

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。