SwiftUI-005-引入其他框架MapKit的地图控件

引入地图

此处引入的地图控件不属于SwiftUI,而是引用外部资源

输出以下代码引入

import MapKit

定义变量

使用@State关键词标识时,每当变量有变化,视图也会随之自动更新

@State private var region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
    span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)

使用变量

$region

通过对变量添加一个$符号,给地图添加一个绑定,引用它的值

Map(coordinateRegion: $region)

img

实时渲染

预览模式可以看到诸如之前演示的文本,图片等控件

但是地图显示有些特殊,需要启动实时模式

点击图中红色标记的图标,可切换到实时模式,切换模式时,注意预览区域上方的重试或者继续按钮等提示

img

完整代码

import SwiftUI
import MapKit
struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )
    var body: some View {
        Map(coordinateRegion: $region)
    }
}
struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

内容回顾

  1. 当在同一个文件导入SwiftUI和其他框架时,可以使用该框架提供的额SwiftUI特定的功能

  2. 使用@state创建一个私有变量,SwiftUI会管理对应数据并根据值得变化自动更新视图,同时上述例子使用$符号对变量进行值得绑定

  3. 地图控件使用预览模式,无法看到完整的数据效果,需要切换到实时模式

END