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 ...
随机推荐
- Oracle11g自带的SQL developer无法打开解决
在安装完Oracle Database 11g Release 2数据库,想试一下Oracle自带的SQL Developer工具,在操作系统菜单的所有程序中找到SQL Developer如下所示,并 ...
- veket智能机器人
官方网站:http://www.lucky8k.com/forum.php veket儿童操作系统 希望工具超过小puppy linux系统 一个还在发展中的linux系统: Slax Linux : ...
- 【sqli-labs】 less3 GET - Error based - Single quotes with twist string (基于错误的GET单引号变形字符型注入)
实质上和less1没有多大区别,看懂了一样走流程 提交参数 加单引号 http://localhost/sqli/Less-3/?id=1' 观察报错,看near 和 at 的引号之间内容 '1'') ...
- 【转载】Intellij IDEA的Hibernate简单应用
转载自: https://www.cnblogs.com/yangyquin/p/5438248.html 1.创建数据库及其表 create database demo; use demo ...
- 【转载】InputStreamReader和OutputStreamWriter 的区别和用法
一.InputStreamReader 用于将一个字节流中的字节解码成字符 , 用法如下: @Test public void Test19() throws Exception { InputStr ...
- vue http请求 vue自带的 vue-resource
vue-resource安装 npm install vue-resource --save-dev 配置 在main.js中引入插件 //Resource 为自定义名 vue-resource 为插 ...
- PAT_A1142#Maximal Clique
Source: PAT A1142 Maximal Clique (25 分) Description: A clique is a subset of vertices of an undirect ...
- [系统资源攻略]IO第一篇-磁盘IO,内核IO概念
几个基本的概念 在研究磁盘性能之前我们必须先了解磁盘的结构,以及工作原理.不过在这里就不再重复说明了,关系硬盘结构和工作原理的信息可以参考维基百科上面的相关词条--Hard disk drive(英文 ...
- 再谈应用环境下的 TIME_WAIT 和 CLOSE_WAIT
转自:http://blog.csdn.net/shootyou/article/details/6622226 昨天解决了一个 HttpClient 调用错误导致的服务器异常,具体过程如下: htt ...
- [NOIP2018模拟赛]d
d题大概是让有n个矩阵,可以随意平移,问删除m个矩阵后最大的面积交是多少. 其实思路很显然. 肯定删x个a最小的和m-x个b最小的. 然后我们先删m个a最小的,然后逐渐少删a,开始删b,用个堆维护b的 ...