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教程(三)

原文地址:https://www.cnblogs.com/suibian1/p/11026030.html

时间: 2024-10-31 01:14:07

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

SwiftUI 官方教程(三)

3. 用 Stacks 组合 View 在上一节创建标题 view 后,我们来添加 text view,它用来显示地标的详细信息,比如公园的名称和所在的州. 在创建 SwiftUI view 时,我们可以在 view 的 body 属性中描述其内容.布局和行为.由于 body属性仅返回单个 view,所以我们可以使用 Stacks 来组合和嵌入多个 view,让它们以水平.垂直或从后到前的顺序组合在一起. 在本节中,我们使用水平的 stack 来显示公园的详细信息,再用垂直的 stack 将标题

SwiftUI 官方教程(一)

完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials 创建和组合 View 此部分将指引你构建一个发现和分享您喜爱地方的 iOS app —— Landmarks .首先我们来构建显示地标详细信息的 view. Landmarks 使用 stacks 将 image.text 等组件进行组合和分层,以此来给 view 布局.如果想给视图添加地图,我们需要引入标准 MapKit 组件.在我们调整设计时,Xcode 可以作出实

SwiftUI 官方教程(五)

SwiftUI官方教程(五) 5. 同时使用 UIKit 和 SwiftUI 至此,我们已准备好创建 map view 了,接下来使用 MapKit 中的 MKMapView 类来渲染地图. 在 SwiftUI 中使用 UIView 子类,需要将其他 view 包装在遵循 UIViewRepresentable 协议的 SwiftUI view 中. SwiftUI 包含了和 WatchKit . AppKit view 类似的协议. 首先,我们创建一个可以呈现 MKMapView 的自定义 v

SwiftUI 官方教程(六)

6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row 嵌套在一个 NavigationButton 中来设置到目标 view 的转场,这样 list 就具有了导航功能. 6.1 把自动创建地标的 list 嵌入到一个 NavigationView 中. LandmarkList.swift import SwiftUI struct LandmarkL

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

在第一个教程中,我们编写了程序来发送和接收来自命名队列的消息. 在这一部分中,我们将创建一个工作队列,该队列将用于在多个worker之间分配耗时的任务. 工作队列(又称任务队列)的主要思路是避免立即执行资源密集型任务(比如耗时较长的邮件发送.文件处理等),而不得不等待它完成. 相反,我们安排任务在以后完成(异步完成). 我们将任务封装为消息并将其发送到队列. 在后台运行的工作进程将获取任务并最终执行作业. 当您运行许多worker时,他们将共享任务. 这个概念在Web应用程序中特别有用,因为在W

Asp.Net MVC4.0 官方教程 入门指南之二--添加一个控制器

Asp.Net MVC4.0 官方教程 入门指南之二--添加一个控制器 MVC概念 MVC的含义是 “模型-视图-控制器”.MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据类. · Views: 应用程序动态生成 HTML所使用的模板文件. · Controllers: 处理浏览器的请求,取得数据模型,然后指定要响应浏览器请求的视图模板. 本系列教程,我们将覆盖所有这些概念,并告诉

学习ASP .NET MVC5官方教程总结(二)添加控制器

学习ASP .NET MVC5官方教程总结(二)添加控制器 在这一章我们来简单讲解一下mvc的概念和控制器的建立和使用还有路由的使用. MVC设计模式是现在一种非常主流的开发模式,他有易于测试和维护的优点.它将传统的web开发分成了三个部分:模型-视图-控制器. 基于 MVC 应用程序中包含: Models: 表示应用程序的数据,并使用验证逻辑强制执行业务规则的数据的类. Views: 您的应用程序用来动态生成 HTML 响应的模板文件. Controllers: 处理传入的请求的浏览器,类检索

C#程序员整理的Unity 3D笔记(二十):2D Toolkit之官方教程《Whack a Mole》

在上篇博客中,简单整理了一下Unity Native 2D功能:<C#程序员整理的Unity 3D笔记(十九):Unity 3D的Native 2D>. 本文开始学习2D商用比较广泛的2D Toolkit插件. 2D Toolkit插件在2D中的地位,犹如UI中NGUI对Unity GUI一样:虽然官方原生的2D还不错,但这是最近1年新版本才有的功能,2年前Unity 2D的王道还是得用插件的,故<2D Toolkit>就成了目前商业不错的选择. 在上周刚开始看的时候,就给自己提了

微信公开课发布微信官方教程:教你用好微信JS-SDK接口

微信公众平台开放JS-SDK(微信内网页开发工具包),说明文档已经有相关使用方法和示例了,很多同学觉得不是很直观,为此微信公开课发布微信官方教程:教你用好微信JS-SDK接口. 1.分享类接口:支持获取“分享到朋友圈”.“发送给朋友”.“分享到QQ”和“分享到微博”按钮的用户点击状态,同时支持自定义分享内容. 小编解读:说起分享接口应用,最常见的莫过于公众号文章分享.通过分享按钮,用户可以将自己喜欢的文章分享给微信好友,也可分享到微信朋友圈.通过此次开放的分享接口,开发者获得了新的能力:可以在用