UIViewRepresentable: ห่อหุ้ม View ของ UIKit

เหตุใดจึงต้องใช้ UIViewRepresentable

import SwiftUI
import UIKit

struct WebView: UIViewRepresentable {
  let url: URL
  // ...
}

เมธอดที่จำเป็น

func makeUIView(context: Context) -> WKWebView {
  WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
  uiView.load(URLRequest(url: url))
}

ตัวอย่าง WebView ฉบับสมบูรณ์

struct WebView: UIViewRepresentable {
  let url: URL
  func makeUIView(context: Context) -> WKWebView { WKWebView() }
  func updateUIView(_ uiView: WKWebView, context: Context) {
    uiView.load(URLRequest(url: url))
  }
}

การใช้ใน SwiftUI

WebView(url: URL(string: "https://apple.com")!)
  .frame(height: 400)
  .cornerRadius(12)

การส่งข้อมูลเข้าไป

struct MapView: UIViewRepresentable {
  var region: MKCoordinateRegion
  func makeUIView(context: Context) -> MKMapView { MKMapView() }
  func updateUIView(_ uiView: MKMapView, context: Context) {
    uiView.setRegion(region, animated: true)
  }
}

การถอดวิว UIKit

static func dismantleUIView(_ uiView: WKWebView, coordinator: Coordinator) {
  uiView.stopLoading()
}

พารามิเตอร์ Context

func updateUIView(_ uiView: MKMapView, context: Context) {
  print(context.environment.colorScheme)  // .light or .dark
}

ค่าจากสภาพแวดล้อมใน UIViewRepresentable

if context.environment.colorScheme == .dark {
  uiView.overrideUserInterfaceStyle = .dark
}

การกำหนดขนาดวิว UIKit

func sizeThatFits(_ proposal: ProposedViewSize, uiView: WKWebView, context: Context) -> CGSize? {
  CGSize(width: proposal.width ?? 300, height: 400)
}

การหลีกเลี่ยงผลข้างเคียงของ makeUIView

// WRONG:
func makeUIView(context: Context) -> MKMapView {
  let v = MKMapView()
  v.setRegion(region, animated: false)  // belongs in updateUIView
  return v
}

วิวที่ห่อหุ้มโดยทั่วไป

// UITextView with custom toolbar
struct RichTextEditor: UIViewRepresentable {
  @Binding var text: String
  // makeUIView, updateUIView, Coordinator...
}

ตรวจสอบความเข้าใจ

สรุปบทเรียน