SwiftUI 官方教程(一)
完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials
创建和组合 View
此部分将指引你构建一个发现和分享您喜爱地方的 iOS app ——
Landmarks
。首先我们来构建显示地标详细信息的 view。
Landmarks
使用stacks
将image
、text
等组件进行组合和分层,以此来给 view 布局。如果想给视图添加地图,我们需要引入标准MapKit
组件。在我们调整设计时,Xcode 可以作出实时反馈,以便我们看到这些调整是如何转换为代码的。下载项目文件并按照以下步骤操作。
- 预计完成时间:40 分钟
- 初始项目文件:下载
1. 创建一个新项目并且浏览 Canvas
用 SwiftUI
的 app 模板来创建一个新的 Xcode 项目,并且浏览一下这个 canvas。

1.1 打开 Xcode ,在 Xcode 的启动窗口中单击 Create a new Xcode project
,或选择 File
> New
> Project
。

1.2 选择 iOS
平台, Single View App
模板,然后单击 Next
。

1.3 输入 Landmarks
作为 Product Name
,勾选 Use SwiftUI
复选框,然后单击 Next
。选择一个位置保存此项目。


SwiftUI教程
1.4 在 Project navigator
中,选中 ContentView.swift
。
默认情况下, SwiftUI
view 文件声明了两个结构体。第一个结构体遵循 View
协议,描述 view 的内容和布局。第二个结构体声明该 view 的预览。
ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}

1.5 在 canvas
中,单击 Resume
来显示预览。
Tip:如果没有
canvas
,选择Editor
>Editor and Canvas
来显示。

1.6 在 body
属性中,将 Hello World
更改为自己的问候语。更改代码时,预览便会实时更新。
ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello SwiftUI!")
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
SwiftUI 官方教程(一)的更多相关文章
- 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 官方教程(三)
3. 用 Stacks 组合 View 在上一节创建标题 view 后,我们来添加 text view,它用来显示地标的详细信息,比如公园的名称和所在的州. 在创建 SwiftUI view 时,我们 ...
- SwiftUI 官方教程(二)
SwiftUI 官方教程(二) 2. 自定义 Text View 为了自定义 view 的显示,我们可以自己更改代码,或者使用 inspector 来帮助我们编写代码. 在构建 Landmarks 的 ...
- SwiftUI 官方教程
SwiftUI 官方教程 完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials SwiftUI 官方教程 SwiftUI ...
- SwiftUI 官方教程(六)
6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row ...
- Unity性能优化(3)-官方教程Optimizing garbage collection in Unity games翻译
本文是Unity官方教程,性能优化系列的第三篇<Optimizing garbage collection in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...
随机推荐
- JavaScript+CSS交互
当鼠标移动到小图片上时,小图片显示红色边框并在上面大图片显示相应大图片,效果如图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
- C# 共享页调用css
@RenderSection("Styles", required: false) @section Styles{ }
- 用Python获取摄像头并实时控制人脸
实现流程从摄像头获取视频流,并转换为一帧一帧的图像,然后将图像信息传递给opencv这个工具库处理,返回灰度图像(就像你使用本地静态图片一样) 程序启动后,根据监听器信息,使用一个while循环,不断 ...
- Android 性能测试初探(五)
书接上文 Android 性能测试初探之 GPU(四) 前文说了的一些性能测试项大家可能都听说,接下来我们聊聊大家不常关注的测试项- 功耗 . 功耗测试主要从以下几个方面入手进行测试 测试手机安装目标 ...
- centos7关闭防火墙以及查看防火墙状态
1.关闭firewall:systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止fir ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- PHP统计当前在线用户数实例
HTML 我们在页面上放置一个显示当前在线人数的div#total以及一个用于展示访客地区分布的列表#onlinelist,默认我们在列表中放置一张与加载动画图片,后面我们用jQuery控制当鼠标滑向 ...
- [SDOI2008]沙拉公主的困惑 线性筛 素数+欧拉
本文为博主原创文章,欢迎转载,请注明出处 www.cnblogs.com/yangyaojia [SDOI2008]沙拉公主的困惑 线性筛 素数+欧拉 题目大意 给定n,m,求在1到n!内与m!互质的 ...
- C#--excel操作控件--interop是什么
这个是微软出的操作excel的类库,为什么这个比NPOI的下载量少这么多?