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 官方教程(五)的更多相关文章
- SwiftUI 官方教程(四)
SwiftUI 官方教程(四) 4. 自定义 Image View 搞定名称和位置 view 后,我们来给地标添加图片. 这不需要添加很多代码,只需要创建一个自定义 view,然后给图片加上遮罩.边框 ...
- SwiftUI 官方教程(八)
8. 动态生成预览 接下来,我们会在 LandmarkList_Previews 中添加代码以在不同的设备尺寸上渲染列表.默认情况下,预览会以当前的 scheme 中设备的大小进行渲染.我们可以通过调 ...
- SwiftUI 官方教程(七)
7. 给子 View 传递数据 LandmarkDetail 现在依然使用硬编码的数据来显示地标.像 LandmarkRow 一样,LandmarkDetail 类型和它组合的其他 view 都需要一 ...
- SwiftUI 官方教程(三)
3. 用 Stacks 组合 View 在上一节创建标题 view 后,我们来添加 text view,它用来显示地标的详细信息,比如公园的名称和所在的州. 在创建 SwiftUI view 时,我们 ...
- SwiftUI 官方教程(二)
SwiftUI 官方教程(二) 2. 自定义 Text View 为了自定义 view 的显示,我们可以自己更改代码,或者使用 inspector 来帮助我们编写代码. 在构建 Landmarks 的 ...
- SwiftUI 官方教程(一)
完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials 创建和组合 View 此部分将指引你构建一个发现和分享您喜爱地方的 ...
- SwiftUI 官方教程
SwiftUI 官方教程 完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials SwiftUI 官方教程 SwiftUI ...
- SwiftUI 官方教程(六)
6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row ...
- RabbitMQ官方教程五 Topic(GOLANG语言实现)
在上一教程中,我们改进了日志记录系统. 我们没有使用只能进行虚拟广播的fanout交换器,而是使用直接交换器,并有可能选择性地接收日志. 尽管使用直接交换改进了我们的系统,但它仍然存在局限性-它不能基 ...
随机推荐
- Eclipse安装配置——For Java
1.下载安装JRE 2.下载Eclipse,解压到相应文件夹 3.配置Eclipse 3.1 配置字体大小 -12号 3.2配置workspace默认编码,utf-8,默认系统windows 3.3 ...
- Arduino 控制超声波测距模块
一.实物图 二.例子代码 用到数字2 和3 引脚,还有两个就是vcc GND两个阴脚,用模块连线比较简单
- LINUX命令行如何查看memcache运行状态
(附加)如何查看memcache服务器端版本: ./memcached -h memcache的运行状态可以方便的用 stats 命令显示. 首先用telnet 127.0.0.1 11211这样 ...
- vue 强制刷新组件
<component v-if="hackReset"></component> 2 3 4 this.hackReset = false this.$ne ...
- phpMyAdmin使用教程
---恢复内容开始--- wamp中自带了管理MySQL的phpMyAdmin,可用来本机测试,服务器维护,虚拟主机用户管理MySQL. 登录需记住servername,username,passwo ...
- 洛谷P1115 最大子段和【dp】
题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一行是一个正整数NN,表示了序列的长度. 第二行包含NN个绝对值不大于1000010000的整数A_iAi ...
- OBS直播和相关操作
OBS Studio(Open Broadcaster Software)是一个免费的开源的视频录制和视频实时流软件.其有多种功能并广泛使用在视频采集,直播等领域. https://obsprojec ...
- css实现面包屑导航
HTML代码: <div id="breadcrumb"> <ul class="crumbs"> <li class=" ...
- python项目开发:用RabbitMQ实现异步RPC
程序要求: 1. 用Rabbit MQ实现RPC 1. 可以异步地执行多条命令 2. 可以对一次性对多个机器执行命令 程序效果: --->run dir host1 host2 .... --- ...
- NET 爬虫
最近经常听说或者接触关于网络爬虫的问题,只是一直看到被人写的代码.而没有真正的做过实践, 昨天做了一下尝试,其中采用网络流行的扩展类库 http://html-agility-pack.net/?z= ...