SwiftUI 簡明教程之使用 UIKit

本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 查看更多內容。

Eul 是一款 SwiftUI & Combine 教程 App（iOS、macOS），以文章（文字、圖片、代碼）配合真機示例（Xcode 12+、iOS 14+，macOS 11+）的形式呈現給讀者。筆者意在盡可能使用簡潔明了的語言闡述 SwiftUI & Combine 相關的知識，使讀者能快速掌握並在 iOS 開發中實踐。

SwiftUI 目前仍然在發展中，相比古老而健壯的 UIKit，它過於年輕，在生產實踐中尚不能獨挑大梁，有時我們需要借助 UIKit 來實現 SwiftUI 無法實現的功能。

UIViewRepresentable

如果我們想使用 UISearchBar 這樣的控件，可以通過 UIViewRepresentable 協議來實現。

struct SearchBarView: UIViewRepresentable {
  func makeUIView(context: Context) -> UISearchBar {
    let uiView = UISearchBar()
    uiView.placeholder = "Input something..."
    uiView.searchBarStyle = .minimal
    return uiView
  }
  
  func updateUIView(_ uiView: UISearchBar, context: Context) {
    uiView.text = searchText
  }
}

makeUIView 只有在實例初始化的時候調用一次，updateUIView 會在視圖更新的時候調用。

然后我們就可以調用 SearchBarView 了，但是這還不夠，如果我們要獲取實時獲取搜索框的文字內容，該怎么辦？在 UIKit 中，我們可以通過代理方法獲取，接下來的問題就是怎么講值傳給 SwiftUI。

UIViewRepresentable 協議中有個方法：func makeCoordinator() -> Self.Coordinator ，我們通過這個方法，可以實現將 UIKit 的變化傳出去告訴 SwiftUI。我們只需要實現一個中間調度器，然后在這個方法內實例化調度器，並帶上需要傳給 SwiftUI 的內容即可。最后實現的所有代碼如下：

struct SearchBarView: UIViewRepresentable {
  @Binding var searchText: String
  
  class Coordinator: NSObject, UISearchBarDelegate {
    var searchBarView: SearchBarView
    
    init(_ searchBarView: SearchBarView) {
      self.searchBarView = searchBarView
    }
    
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
      searchBarView.searchText = searchText
    }
    
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
      searchBar.endEditing(true)
    }
  }
  
  func makeCoordinator() -> Coordinator {
    Coordinator(self)
  }
  
  func makeUIView(context: Context) -> UISearchBar {
    let uiView = UISearchBar()
    uiView.placeholder = "Input something..."
    uiView.searchBarStyle = .minimal
    uiView.delegate = context.coordinator
    return uiView
  }
  
  func updateUIView(_ uiView: UISearchBar, context: Context) {
    uiView.text = searchText
  }
}

UIViewControllerRepresentable

UIViewControllerRepresentable 與 UIViewRepresentable 類似，只不過它的使用場景是使用控制器。這里簡單舉例如何使用：

struct SafariView: UIViewControllerRepresentable {
  let url: URL
  
  func makeUIViewController(context: Context) -> SFSafariViewController {
    let controller = SFSafariViewController(url: url)
    return controller
  }
  
  func updateUIViewController(_ uiViewController: SFSafariViewController, context: Context) {
    
  }
}

本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 查看更多內容。