首页 > 解决方案 > 如何使用搜索栏从 SwiftUI 视图调用完成块?

问题描述

我想在这个视图中创建一个搜索栏,但我想知道如何调用填充数据的完成块。目前我有完成块.onAppear但是当我去添加一个搜索栏时,数据只会被加载一次.onAppear,所以当我搜索时,结果不会更新。这是我的看法

struct CocktailList: View {
    @State private var cocktails: [Cocktail]
    @State private var searchText = ""
    var body: some View {
        VStack {
            NavigationView {
                List(cocktails, id: \.idDrink) { cocktail in
                    NavigationLink(destination: CocktailDetail(fromCocktail: cocktail)) {
                        CocktailRow(fromCocktail: cocktail)
                    }
                }
                .navigationTitle("Search Results")
            }.onAppear {
                requestCocktail(searchTerm: "daiquiri") { cocktails in
                    self.cocktails = cocktails
                }
            }
        }
    }
    
    init() {
        self.cocktails = []
    }
}

如何调用requestCocktail()searchText 的更新以及集成简单搜索栏的最佳方式是什么?

标签: swiftxcodeswiftui

解决方案


我给了你一个带有 TextField 和不同相关操作的例子:onCommit, onEditing,当文本改变时,当文本没有改变 1 秒时。您可以选择何时执行requestCocktail().

import Combine
import SwiftUI
struct SwiftUIView11: View {
    @State private var text: String = ""
    @State private var result: String = ""
    let textHasChanged = PassthroughSubject<Void, Never>()
    let debouncer: AnyPublisher<Void, Never>

    init() {
        debouncer = textHasChanged
            .debounce(for: .seconds(1), scheduler: DispatchQueue.main)
            .eraseToAnyPublisher()
    }

    var body: some View {
        VStack {
            Text(result)

            TextField("", text: $text, onEditingChanged: {
                isEditing in
                result = isEditing ? "isEditing" : "isNotEditing"
            }, onCommit: {
                result = "onCommit"
            })
                .background(Color.yellow)
            .onChange(of: text) { newText in
                result = "text changed : \(newText)"
                textHasChanged.send()
            }
            .onReceive(debouncer) { _ in
                result = "paused editing"
            }
        }
    }
}

推荐阅读