SwiftUI 官方教程(二)
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 官方教程(三)
3. 用 Stacks 组合 View 在上一节创建标题 view 后,我们来添加 text view,它用来显示地标的详细信息,比如公园的名称和所在的州. 在创建 SwiftUI view 时,我们 ...
- SwiftUI 官方教程(一)
完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials 创建和组合 View 此部分将指引你构建一个发现和分享您喜爱地方的 ...
- SwiftUI 官方教程(八)
8. 动态生成预览 接下来,我们会在 LandmarkList_Previews 中添加代码以在不同的设备尺寸上渲染列表.默认情况下,预览会以当前的 scheme 中设备的大小进行渲染.我们可以通过调 ...
- 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 官方教程
SwiftUI 官方教程 完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials SwiftUI 官方教程 SwiftUI ...
- RabbitMQ官方教程二 Work Queues(GOLANG语言实现)
RabbitMQ官方教程二 Work Queues(GOLANG语言实现) 在第一个教程中,我们编写了程序来发送和接收来自命名队列的消息. 在这一部分中,我们将创建一个工作队列,该队列将用于在多个wo ...
- SwiftUI 官方教程(六)
6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row ...
随机推荐
- RRDtool入门详解
---------------原创内容,转载请注明出处.<yaoyao0777@Gmail.com>------------ 一.概述 RRDtool(round-robin databa ...
- css+js+html实现的遮罩
——————页面遮罩(CSS+JS+HTML)—————— HTML: <div id="mask" class="mask"></div&g ...
- Eclipse之调试代码和返回
编写代码时,经常会遇到各种莫名其妙的问题,为了检测程序是哪里出现问题,我们通过断点调试来判断哪一步出错 一.断点 在需要断点的地方,在左侧双击鼠标设置断点,可设置多个 去掉断点:在断点上双击一下,没有 ...
- 使用std::cout不能输出显示
在测试一行函数时,出现std::cout不能输出的情况,找不到原因. 1. 只好从main函数第一行,开始测试,直到发现一个函数 o_Initer.ekf_filter(filter, ...
- 重写servlet,可以获取不同的方法
public class BaseServlet extends HttpServlet { @Override public void service(HttpServletRequest requ ...
- eas之数据融合
1.如何进行自由融合自由融合无须指定区域,KDTable将根据指定的融合模式,融合相邻且值相等的单元.// 自由行融合table.getMergeManager().setMergeMode(KDTM ...
- Docker理解与使用(转)
2013年发布至今, Docker 一直广受瞩目,被认为可能会改变软件行业. 但是,许多人并不清楚 Docker 到底是什么,要解决什么问题,好处又在哪里?本文就来详细解释,帮助大家理解它,还带有简单 ...
- delphi主i窗口中实现多页面管理效果
MainForm上加Panel,把Panel的DockSite设为True, 把窗口FB_orderManage的DragKind设为dkDock, DragMode设为dmAuromatic 在M ...
- java中Date与String转化 string转float
这种转换要用到java.text.SimpleDateFormat类 字符串转换成日期类型: 方法1: Date date=new Date("2017-02-01"); 方法2: ...
- POJ - 3126 - Prime
先上题目 Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9259 Accepted: 5274 D ...