SwiftUI 官方教程(八)
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 官方教程(八)的更多相关文章
- SwiftUI 官方教程(七)
7. 给子 View 传递数据 LandmarkDetail 现在依然使用硬编码的数据来显示地标.像 LandmarkRow 一样,LandmarkDetail 类型和它组合的其他 view 都需要一 ...
- SwiftUI 官方教程(五)
SwiftUI官方教程(五) 5. 同时使用 UIKit 和 SwiftUI 至此,我们已准备好创建 map view 了,接下来使用 MapKit 中的 MKMapView 类来渲染地图. 在 Sw ...
- SwiftUI 官方教程(四)
SwiftUI 官方教程(四) 4. 自定义 Image View 搞定名称和位置 view 后,我们来给地标添加图片. 这不需要添加很多代码,只需要创建一个自定义 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 ...
- DroidParts 中文系列教程(基于官方教程)
DroidParts中文系列教程(基于官方教程) (一)DroidParts框架概况 2014年4月18日星期五 11:36 他是一个精心构造的安卓框架,包括下面这些基本功能 DI依赖注入,可以注入V ...
随机推荐
- 超简单:纯CSS实现的进度条
——————纯CSS实现的进度条—————— HTML: <div class="wrapper"> <div class="bar"> ...
- 安卓代码迁移:Make.exe: *** [libs/armabi-v7a/gdbserver] Error 1
解决办法1:安装ndk和eclipse修改为x86操作系统 解决办法2:降低更换NDK版本
- web前端技术与原生技术的竞争, 及未来的发展
用户界面领域: web技术与原生技术之争 除了浏览器中运行之外, html5的技术也在app领域和移动端的安卓, iOS, 以及桌面端的window, linux以及OS X展开了竞争. 同样属于用户 ...
- 解决Cannot change version of project facet Dynamic Web M 3.0
解决Cannot change version of project facet Dynamic Web M 3.0 dynamic web module 版本之间的区别: Servlet 3.0 D ...
- SQL 分组
- Ubuntu 更换阿里源
查看新版本信息 lsb_release -c Ubuntu 12.04 (LTS)代号为precise. Ubuntu 14.04 (LTS)代号为trusty. Ubuntu 15.04 代号为vi ...
- 前端开发—HTML
HTML介绍 web服务的本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen( ...
- 13、Next Item Recommendation with Self-Attention---自注意力+CML
一.摘要: 自注意力机制------从用户历史交互中推断出项目-项目关系.学习每个项目的相对权重[用来学习用户的暂时兴趣表示] 二. 模型: 一部分是用于建模用户短期意图的自注意力机制,一部分是建模用 ...
- Keras学习基础(2)
目录: Keras的模块结构 数据预处理 模型 网络层 网络配置 Keras中的数据处理 文本预处理 序列预处理 图像预处理 Keras中的模型 Sequential顺序模型 Model模型[通用模型 ...
- 【剑指Offer】40、数组中只出现一次的数字
题目描述: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字.要求时间复杂度为O(n),空间复杂度为O(1). 解题思路: 这道题目相对比较难 ...