7. 给子 View 传递数据

LandmarkDetail 现在依然使用硬编码的数据来显示地标。像 LandmarkRow 一样,LandmarkDetail 类型和它组合的其他 view 都需要一个 landmark 属性作为它们的数据源。

在开始子 view 的内容时,我们会把 CircleImage 、 MapView 和 LandmarkDetail 的显示从硬编码改为传入的数据。SwiftUI 官方教程

7.1 在 CircleImage.swif 中,添加存储属性 image 。SwiftUI教程

这是使用 SwiftUI 构建 view 时的常见模式。我们的自定义 view 通常会为特定视图包装和封装一些 modifiers 。

CircleImage.swift

import SwiftUI

struct CircleImage: View {
var image: Image var body: some View {
image
.clipShape(Circle())
.overlay(Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
}
} struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}

7.2 更新 preview provider ,传递一个 Turtle Rock 的图片。

CircleImage.swift

import SwiftUI

struct CircleImage: View {
var image: Image var body: some View {
image
.clipShape(Circle())
.overlay(Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
}
} struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage(image: Image("turtlerock"))
}
}

7.3 在 MapView.swift 中,给 MapView 添加一个 coordinate 属性,然后把经纬度的硬编码换成使用这个属性。SwiftUI教程

MapView.swift

import SwiftUI
import MapKit struct MapView: UIViewRepresentable {
var coordinate: CLLocationCoordinate2D func makeUIView(context: Context) -> MKMapView {
MKMapView(frame: .zero)
} func updateUIView(_ view: MKMapView, context: Context) { let span = MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
let region = MKCoordinateRegion(center: coordinate, span: span)
view.setRegion(region, animated: true)
}
} struct MapView_Preview: PreviewProvider {
static var previews: some View {
MapView()
}
}

7.4 更新 preview provider ,传递数据数组中第一个地标的坐标。

MapView.swift

import SwiftUI
import MapKit struct MapView: UIViewRepresentable {
var coordinate: CLLocationCoordinate2D func makeUIView(context: Context) -> MKMapView {
MKMapView(frame: .zero)
} func updateUIView(_ view: MKMapView, context: Context) {
let span = MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
let region = MKCoordinateRegion(center: coordinate, span: span)
view.setRegion(region, animated: true)
}
} struct MapView_Preview: PreviewProvider {
static var previews: some View {
MapView(coordinate: landmarkData[0].locationCoordinate)
}
}

7.5 在 LandmarkDetail.swift 中,SwiftUI教程 给 LandmarkDetail 类型添加 landmark 属性。

LandmarkDetail.swift

import SwiftUI

struct LandmarkDetail: View {
var landmark: Landmark var body: some View {
VStack {
MapView()
.frame(height: 300) CircleImage()
.offset(y: -130)
.padding(.bottom, -130) VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title) HStack(alignment: .top) {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding() Spacer()
}
}
} struct LandmarkDetail_Preview: PreviewProvider {
static var previews: some View {
LandmarkDetail()
}
}

7.6 更新 preview provider ,使用 landmarkData 中的第一个地标。

LandmarkDetail.swift

import SwiftUI

struct LandmarkDetail: View {
var landmark: Landmark var body: some View {
VStack {
MapView()
.frame(height: 300) CircleImage()
.offset(y: -130)
.padding(.bottom, -130) VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title) HStack(alignment: .top) {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding() Spacer()
}
}
} struct LandmarkDetail_Preview: PreviewProvider {
static var previews: some View {
LandmarkDetail(landmark: landmarkData[0])
}
}

7.7 将所需数据传递给我们的自定义类型。

LandmarkDetail.swift

import SwiftUI

struct LandmarkDetail: View {
var landmark: Landmark var body: some View {
VStack {
MapView(coordinate: landmark.locationCoordinate)
.frame(height: 300) CircleImage(image: landmark.image(forSize: 250))
.offset(y: -130)
.padding(.bottom, -130) VStack(alignment: .leading) {
Text(landmark.name)
.font(.title) HStack(alignment: .top) {
Text(landmark.park)
.font(.subheadline)
Spacer()
Text(landmark.state)
.font(.subheadline)
}
}
.padding() Spacer()
}
}
} struct LandmarkDetail_Preview: PreviewProvider {
static var previews: some View {
LandmarkDetail(landmark: landmarkData[0])
}
}

7.8 最后,调用 navigationBarTitle(_:displayMode:) 方法,给导航栏添加显示详情 view 时的标题。

LandmarkDetail.swift

import SwiftUI

struct LandmarkDetail: View {
var landmark: Landmark var body: some View {
VStack {
MapView(coordinate: landmark.locationCoordinate)
.frame(height: 300) CircleImage(image: landmark.image(forSize: 250))
.offset(y: -130)
.padding(.bottom, -130) VStack(alignment: .leading) {
Text(landmark.name)
.font(.title) HStack(alignment: .top) {
Text(landmark.park)
.font(.subheadline)
Spacer()
Text(landmark.state)
.font(.subheadline)
}
}
.padding() Spacer()
}
.navigationBarTitle(Text(landmark.name), displayMode: .inline)
}
} struct LandmarkDetail_Preview: PreviewProvider {
static var previews: some View {
LandmarkDetail(landmark: landmarkData[0])
}
}

7.9 在 SceneDelegate.swift 中,把 app 的 rootView 改成 LandmarkList 。

当我们不使用预览而是在模拟器中独立运行 app 时,app 会以 SceneDelegate 中定义的 rootView开始显示。

SceneDelegate.swift

import UIKit
import SwiftUI class SceneDelegate: UIResponder, UIWindowSceneDelegate {
var window: UIWindow? func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
// Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
// If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
// This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead). // Use a UIHostingController as window root view controller
let window = UIWindow(frame: UIScreen.main.bounds)
window.rootViewController = UIHostingController(rootView: LandmarkList())
self.window = window
window.makeKeyAndVisible()
} // ...
}

7.10 在 LandmarkList.swift 中,给目标 LandmarkDetail 传递当前的地标。

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
var body: some View {
NavigationView {
List(landmarkData) { landmark in
NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
LandmarkRow(landmark: landmark)
}
}
.navigationBarTitle(Text("Landmarks"))
}
}
} struct LandmarkList_Previews: PreviewProvider {
static var previews: some View {
LandmarkList()
}
}

7.11 切换到实时预览,可以查看从列表导航到正确的地标详情 view 了。

SwiftUI 官方教程(七)的更多相关文章

  1. SwiftUI 官方教程(八)

    8. 动态生成预览 接下来,我们会在 LandmarkList_Previews 中添加代码以在不同的设备尺寸上渲染列表.默认情况下,预览会以当前的 scheme 中设备的大小进行渲染.我们可以通过调 ...

  2. SwiftUI 官方教程(五)

    SwiftUI官方教程(五) 5. 同时使用 UIKit 和 SwiftUI 至此,我们已准备好创建 map view 了,接下来使用 MapKit 中的 MKMapView 类来渲染地图. 在 Sw ...

  3. SwiftUI 官方教程(四)

    SwiftUI 官方教程(四) 4. 自定义 Image View 搞定名称和位置 view 后,我们来给地标添加图片. 这不需要添加很多代码,只需要创建一个自定义 view,然后给图片加上遮罩.边框 ...

  4. SwiftUI 官方教程(三)

    3. 用 Stacks 组合 View 在上一节创建标题 view 后,我们来添加 text view,它用来显示地标的详细信息,比如公园的名称和所在的州. 在创建 SwiftUI view 时,我们 ...

  5. SwiftUI 官方教程(二)

    SwiftUI 官方教程(二) 2. 自定义 Text View 为了自定义 view 的显示,我们可以自己更改代码,或者使用 inspector 来帮助我们编写代码. 在构建 Landmarks 的 ...

  6. SwiftUI 官方教程(一)

    完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials   创建和组合 View 此部分将指引你构建一个发现和分享您喜爱地方的 ...

  7. SwiftUI 官方教程

    SwiftUI 官方教程 完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials   SwiftUI 官方教程 SwiftUI ...

  8. SwiftUI 官方教程(六)

    6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row  ...

  9. DroidParts 中文系列教程(基于官方教程)

    DroidParts中文系列教程(基于官方教程) (一)DroidParts框架概况 2014年4月18日星期五 11:36 他是一个精心构造的安卓框架,包括下面这些基本功能 DI依赖注入,可以注入V ...

随机推荐

  1. 偶尔遇到的“The request was aborted:Could not create SSL/TLS secure channel.”怎么解决?

    项目中涉及到调用第三方的Https的WebService,我使用的是原始的HttpWebRequest. 代码中已经考虑到是Https,加上了SSL3协议,加上了委托调用.但偶尔还是会碰到 The r ...

  2. 总结Linq或者lamdba的写法

    var head = new OmsEcorderHead { PkEcorderHead = OrderHeadId, AppId = appid, Integral = Convert.ToDec ...

  3. ROS:使用ubuntuKylin17.04安装ROS赤xi龟

    使用ubuntuKylin17.04安装 参考了此篇文章:SLAM: Ubuntu16.04安装ROS-kinetic 重复官方链接的步骤也没有成功. 此后发现4.10的内核,不能使用Kinetic. ...

  4. 关于OpenCV的Mat画图问题

    由于OpenCV的java版本画图有太多错误,只能自己编写画图的代码,在一个函数中,编写出画圆和深度距离的代码, 代码如下: public int CircleMyMat(Mat Show, Poin ...

  5. [CefSharp] 如何在JavaScript中调用C#代码

    本例在WinForms下实现,具体流程与WPF一致. 本例仅供调用示例,不代表正常业务书写流程. 1. 创建WinForms项目,并将项目属性设置为x86平台 此处预先设置,避免引用时报错,再花更多的 ...

  6. nginx_安装测试

    首先安装环境: [root@local nginx-1.9.14]#  yum install gcc-c++  pcre pcre-devel  zlib zlib-devel openssl op ...

  7. spring-boot启动自动执行sql文件失效 解决办法

    在springboot1.5及以前的版本,要执行sql文件只需在applicaion文件里指定sql文件的位置即可.但是到了springboot2.x版本, 如果只是这样做的话springboot不会 ...

  8. S-HR薪酬项目与核算表的关系

  9. Cocos2d+C++运行出现中断的解决方法

    原因是引入外部的文件不存在问题,一般是路径问题,例如引入的图片文件路径不存在.

  10. SPOJ 1812 LCS2 - Longest Common Substring II (后缀自动机、状压DP)

    手动博客搬家: 本文发表于20181217 23:54:35, 原地址https://blog.csdn.net/suncongbo/article/details/85058680 人生第一道后缀自 ...