SwiftUI 官方教程（五） SwiftUI 教程（四）

SwiftUI官方教程（五）

5. 同時使用 UIKit 和 SwiftUI

至此，咱們已準備好建立 map view 了，接下來使用 MapKit 中的 MKMapView 類來渲染地圖。

在 SwiftUI 中使用 UIView 子類，須要將其餘 view 包裝在遵循 UIViewRepresentable 協議的 SwiftUI view 中。 SwiftUI 包含了和 WatchKit 、 AppKit view 相似的協議。

首先，咱們建立一個能夠呈現 MKMapView 的自定義 view。

SwiftUI教程

5.1 選擇 File > New > File ，選擇 iOS 平臺，選擇 SwiftUI View 模板，而後單擊 Next 。將新文件命名爲 MapView.swift ，而後單擊 Create 。

5.2 給 MapKit 添加 import 語句，聲明 MapView 類型遵循 UIViewRepresentable 。

能夠忽略 Xcode 的錯誤，接下來的幾步會解決這些問題。

SwiftUI教程

MapView.swift

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    var body: some View {
        Text("Hello World")
    }
}

struct MapView_Preview: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

UIViewRepresentable 協議須要實現兩個方法： makeUIView(context:) 用來建立一個 MKMapView， updateUIView(_:context:) 用來配置 view 並響應修改。

5.3 用 makeUIView(context:) 方法替換 body 屬性，該方法建立並返回一個空的 MKMapView。

MapView.swift

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
	
	typealias UIViewType = MKMapView

    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        return MKMapView(frame: .zero)
    }
}

struct MapView_Preview: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

5.4 實現 updateUIView(_:context:) 方法，給 map view 設置座標，使其在 Turtle Rock 上居中。

MapView.swift

import SwiftUI
import MapKit

struct MapView : UIViewRepresentable {
    
    typealias UIViewType = MKMapView
    
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        return MKMapView(frame: .zero)
    }
    
    func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

struct MapView_Preview: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

當預覽處於 static mode 時僅顯示 SwiftUI view 。由於 MKMapView 是一個 UIView 的子類，因此須要切換到實時模式才能看到地圖。

SwiftUI教程

5.5 單擊 Live Preview 可將預覽切換爲實時模式，有時也會用到 Try Again 或 Resume 按鈕。

片刻以後，你會看到 Joshua Tree National Park 的地圖，這是 Turtle Rock 的故鄉。

 

SwiftUI 教程（四）