如何檢測 SwiftUI 中 TextField 的實時更改？

Question

我有一個簡單的 TextField，它像這樣綁定到狀態“位置”，

TextField("Search Location", text: $location)

每次此字段更改時，我都想調用一個函數，如下所示：

TextField("Search Location", text: $location) {
   self.autocomplete(location)
}

然而這行不通。 我知道有回調 onEditingChanged - 但是這似乎只有在聚焦該字段時才會觸發。

每次更新字段時如何調用此函數？

Answer 1

您可以使用自定義閉包創建綁定，如下所示：

struct ContentView: View {
    @State var location: String = ""

    var body: some View {
        let binding = Binding<String>(get: {
            self.location
        }, set: {
            self.location = $0
            // do whatever you want here
        })

        return VStack {
            Text("Current location: \(location)")
            TextField("Search Location", text: binding)
        }

    }
}

Answer 2

SwiftUI 2.0

從 iOS 14、macOS 11 或任何其他包含 SwiftUI 2.0 的操作系統開始，有一個名為.onChange的新修飾符可以檢測給定state任何更改：

struct ContentView: View {
    @State var location: String = ""

    var body: some View {
        TextField("Your Location", text: $location)
            .onChange(of: location) {
                print($0) // You can do anything due to the change here.
                // self.autocomplete($0) // like this
            }
    }
}

SwiftUI 1.0

對於較舊的 iOS 和其他 SwiftUI 1.0 平台，您可以使用onReceive ：

.onReceive(location.publisher) { 
    print($0)
}

請注意，它返回更改而不是整個值。 如果您需要與onChange相同的行為，您可以使用組合並遵循@pawello2222 提供的答案。

Answer 3

如果您需要使用ViewModel ，另一種解決方案可能是：

import SwiftUI
import Combine

class ViewModel: ObservableObject {
    @Published var location = "" {
        didSet {
            print("set")
            //do whatever you want
        }
    }
}

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

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

Answer 4

SwiftUI 1 & 2

使用onReceive ：

import Combine
import SwiftUI

struct ContentView: View {
    @State var location: String = ""

    var body: some View {
        TextField("Search Location", text: $location)
            .onReceive(Just(location)) { location in
                // print(location)
            }
    }
}

Answer 5

我發現最有用的是 TextField 有一個名為 onEditingChanged 的​​屬性，該屬性在編輯開始和編輯完成時調用。

               TextField("Enter song title", text: self.$userData.songs[self.songIndex].name, onEditingChanged: { (changed) in
               if changed {
                   print("text edit has begun")
               } else {
                   print("committed the change")
                   saveSongs(self.userData.songs)
               }

           }).textFieldStyle(RoundedBorderTextFieldStyle())
               .font(.largeTitle)

Answer 6

雖然其他答案可能有效，但這個答案對我有用，我需要傾聽文本變化並對其做出反應。

第一步創建一個擴展函數。

extension Binding {
    func onChange(_ handler: @escaping (Value) -> Void) -> Binding<Value> {
        Binding(
            get: { self.wrappedValue },
            set: { newValue in
                self.wrappedValue = newValue
                handler(newValue)
            }
        )
    }
}

現在對TextField 中的綁定調用更改，如下所示。

  TextField("hint", text: $text.onChange({ (value) in
      //do something here
  }))

來源： HackingWithSwift