8. 动态生成预览

接下来,我们会在 LandmarkList_Previews 中添加代码以在不同的设备尺寸上渲染列表。默认情况下,预览会以当前的 scheme 中设备的大小进行渲染。我们可以通过调用 previewDevice(_:) 方法来改变预览设备。SwiftUI官方教程

8.1 首先,改变当前 list 的预览来显示 iPhone SE 的尺寸。

我们可以输入任何 Xcode scheme 菜单中显示的设备名称。

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()
.previewDevice(PreviewDevice(rawValue: "iPhone SE"))
}
}

8.2 在 list 预览中用设备名称数组作为数据,将 LandmarkList 嵌入到 ForEach 实例中。SwiftUI教程

ForEach 以与 list 相同的方式对集合进行操作,这样我们就可以在任何可以使用子视图的地方使用它,比如 stacks , lists ,groups 等。当数据元素像这里使用的字符串一样是简单的值类型时,我们可以使用 \.self 作为标识符的 key path 。

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 {
ForEach(["iPhone SE", "iPhone XS Max"].identified(by: \.self)) { deviceName in
LandmarkList()
.previewDevice(PreviewDevice(rawValue: deviceName))
}
}
}

8.3 使用 previewDisplayName(_:) 方法把设备名称作为 labels 添加到预览中。SwiftUI教程

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 {
ForEach(["iPhone SE", "iPhone XS Max"].identified(by: \.self)) { deviceName in
LandmarkList()
.previewDevice(PreviewDevice(rawValue: deviceName))
.previewDisplayName(deviceName)
}
}
}

8.4 我们可以在 canvas 中体验不同的设备,对比它们在渲染 view 时的差异。

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

  1. SwiftUI 官方教程(七)

    7. 给子 View 传递数据 LandmarkDetail 现在依然使用硬编码的数据来显示地标.像 LandmarkRow 一样,LandmarkDetail 类型和它组合的其他 view 都需要一 ...

  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. O​r​a​c​l​e​1​1​g​自​带​的​S​Q​L​ ​d​e​v​e​l​o​p​e​r​无​法​打​开​解​决​

    在安装完Oracle Database 11g Release 2数据库,想试一下Oracle自带的SQL Developer工具,在操作系统菜单的所有程序中找到SQL Developer如下所示,并 ...

  2. veket智能机器人

    官方网站:http://www.lucky8k.com/forum.php veket儿童操作系统 希望工具超过小puppy linux系统 一个还在发展中的linux系统: Slax Linux : ...

  3. 【sqli-labs】 less3 GET - Error based - Single quotes with twist string (基于错误的GET单引号变形字符型注入)

    实质上和less1没有多大区别,看懂了一样走流程 提交参数 加单引号 http://localhost/sqli/Less-3/?id=1' 观察报错,看near 和 at 的引号之间内容 '1'') ...

  4. 【转载】Intellij IDEA的Hibernate简单应用

    转载自: https://www.cnblogs.com/yangyquin/p/5438248.html   1.创建数据库及其表 create database demo;    use demo ...

  5. 【转载】InputStreamReader和OutputStreamWriter 的区别和用法

    一.InputStreamReader 用于将一个字节流中的字节解码成字符 , 用法如下: @Test public void Test19() throws Exception { InputStr ...

  6. vue http请求 vue自带的 vue-resource

    vue-resource安装 npm install vue-resource --save-dev 配置 在main.js中引入插件 //Resource 为自定义名 vue-resource 为插 ...

  7. PAT_A1142#Maximal Clique

    Source: PAT A1142 Maximal Clique (25 分) Description: A clique is a subset of vertices of an undirect ...

  8. [系统资源攻略]IO第一篇-磁盘IO,内核IO概念

    几个基本的概念 在研究磁盘性能之前我们必须先了解磁盘的结构,以及工作原理.不过在这里就不再重复说明了,关系硬盘结构和工作原理的信息可以参考维基百科上面的相关词条--Hard disk drive(英文 ...

  9. 再谈应用环境下的 TIME_WAIT 和 CLOSE_WAIT

    转自:http://blog.csdn.net/shootyou/article/details/6622226 昨天解决了一个 HttpClient 调用错误导致的服务器异常,具体过程如下: htt ...

  10. [NOIP2018模拟赛]d

    d题大概是让有n个矩阵,可以随意平移,问删除m个矩阵后最大的面积交是多少. 其实思路很显然. 肯定删x个a最小的和m-x个b最小的. 然后我们先删m个a最小的,然后逐渐少删a,开始删b,用个堆维护b的 ...