SwiftUI 官方教程(二)

2. 自定义 Text View

为了自定义 view 的显示,我们可以自己更改代码,或者使用 inspector 来帮助我们编写代码。

在构建 Landmarks 的过程中,我们可以使用任何编辑器来工作:编写源码、修改 canvas、或者通过 inspectors ,无论使用哪种工具,代码都会保持更新。

接下来,我们使用 inspector 来自定义 text view 。

SwiftUI教程

2.1 在预览中,按住 Command 并单击问候语来显示编辑窗口,然后选择 Inspect 。

编辑窗口显示了可以修改的不同属性,具体取决于其 view 类型。

2.2 用 inspector 将文本改为 Turtle Rock ,这是在 app 中显示的第一个地标的名字。

SwiftUI教程

2.3 将 Font 修改为 Title 。

这个修改会让文本使用系统字体,之后它就能正确显示用户的偏好字体大小和设置。

Edit the code by hand to add the .color(.green) modifier; this changes the text’s color to green.

To customize a SwiftUI view, you call methods called modifiers. Modifiers wrap a view to change its display or other properties. Each modifier returns a new view, so it’s common to chain multiple modifiers, stacked vertically.

2.4 在代码中添加 .color(.green) ,将文本的颜色更改为绿色。

如果想自定义 SwiftUI 的 view,我们可以调用一类叫做 modifiers 的方法。这类方法通过包装一个 view 来改变它的显示或者其他属性。每个 modifiers 方法会返回一个新的 view,因此我们可以链式调用多个 modifiers 方法。

ContentView.swift

import SwiftUI

struct ContentView: View {
var body: some View {
Text("Turtle Rock")
.font(.title)
.color(.green)
}
} struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}

view 的真实来源是其实是代码,当我们使用 inspector 修改或删除 modifiers 时,Xcode 会立即更新我们的代码。

2.5 这次我们在代码编辑区按住 Command ,单击 Text 的声明来打开 inspector ,然后选择 Inspect 。单击颜色菜单并且选择 Inherited ,这样文字又变回了黑色。

2.6 注意,Xcode 会自动针对修改来更新代码,例如删除了 .color(.green) 。

ContentView.swift

import SwiftUI

struct ContentView: View {
var body: some View {
Text("Turtle Rock")
.font(.title) }
} struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}

SwiftUI教程(一)

SwiftUI教程(三)

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

  1. SwiftUI 官方教程(三)

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

  2. SwiftUI 官方教程(一)

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

  3. SwiftUI 官方教程(八)

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

  4. SwiftUI 官方教程(七)

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

  5. SwiftUI 官方教程(五)

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

  6. SwiftUI 官方教程(四)

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

  7. SwiftUI 官方教程

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

  8. RabbitMQ官方教程二 Work Queues(GOLANG语言实现)

    RabbitMQ官方教程二 Work Queues(GOLANG语言实现) 在第一个教程中,我们编写了程序来发送和接收来自命名队列的消息. 在这一部分中,我们将创建一个工作队列,该队列将用于在多个wo ...

  9. SwiftUI 官方教程(六)

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

随机推荐

  1. RRDtool入门详解

    ---------------原创内容,转载请注明出处.<yaoyao0777@Gmail.com>------------ 一.概述 RRDtool(round-robin databa ...

  2. css+js+html实现的遮罩

    ——————页面遮罩(CSS+JS+HTML)—————— HTML: <div id="mask" class="mask"></div&g ...

  3. Eclipse之调试代码和返回

    编写代码时,经常会遇到各种莫名其妙的问题,为了检测程序是哪里出现问题,我们通过断点调试来判断哪一步出错 一.断点 在需要断点的地方,在左侧双击鼠标设置断点,可设置多个 去掉断点:在断点上双击一下,没有 ...

  4. 使用std::cout不能输出显示

    在测试一行函数时,出现std::cout不能输出的情况,找不到原因. 1.         只好从main函数第一行,开始测试,直到发现一个函数 o_Initer.ekf_filter(filter, ...

  5. 重写servlet,可以获取不同的方法

    public class BaseServlet extends HttpServlet { @Override public void service(HttpServletRequest requ ...

  6. eas之数据融合

    1.如何进行自由融合自由融合无须指定区域,KDTable将根据指定的融合模式,融合相邻且值相等的单元.// 自由行融合table.getMergeManager().setMergeMode(KDTM ...

  7. Docker理解与使用(转)

    2013年发布至今, Docker 一直广受瞩目,被认为可能会改变软件行业. 但是,许多人并不清楚 Docker 到底是什么,要解决什么问题,好处又在哪里?本文就来详细解释,帮助大家理解它,还带有简单 ...

  8. delphi主i窗口中实现多页面管理效果

    MainForm上加Panel,把Panel的DockSite设为True, 把窗口FB_orderManage的DragKind设为dkDock,  DragMode设为dmAuromatic 在M ...

  9. java中Date与String转化 string转float

    这种转换要用到java.text.SimpleDateFormat类 字符串转换成日期类型: 方法1: Date date=new Date("2017-02-01"); 方法2: ...

  10. POJ - 3126 - Prime

    先上题目 Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9259   Accepted: 5274 D ...