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

 

创建和组合 View

此部分将指引你构建一个发现和分享您喜爱地方的 iOS app —— Landmarks 。首先我们来构建显示地标详细信息的 view。

Landmarks 使用 stacksimagetext 等组件进行组合和分层,以此来给 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

 

 SwiftUI教程

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 官方教程(一)的更多相关文章

  1. SwiftUI 官方教程(八)

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

  2. SwiftUI 官方教程(七)

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

  3. SwiftUI 官方教程(五)

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

  4. SwiftUI 官方教程(四)

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

  5. SwiftUI 官方教程(三)

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

  6. SwiftUI 官方教程(二)

    SwiftUI 官方教程(二) 2. 自定义 Text View 为了自定义 view 的显示,我们可以自己更改代码,或者使用 inspector 来帮助我们编写代码. 在构建 Landmarks 的 ...

  7. SwiftUI 官方教程

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

  8. SwiftUI 官方教程(六)

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

  9. Unity性能优化(3)-官方教程Optimizing garbage collection in Unity games翻译

    本文是Unity官方教程,性能优化系列的第三篇<Optimizing garbage collection in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...

随机推荐

  1. JavaScript+CSS交互

    当鼠标移动到小图片上时,小图片显示红色边框并在上面大图片显示相应大图片,效果如图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  2. (转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分

    https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...

  3. C# 共享页调用css

    @RenderSection("Styles", required: false) @section Styles{ }

  4. 用Python获取摄像头并实时控制人脸

    实现流程从摄像头获取视频流,并转换为一帧一帧的图像,然后将图像信息传递给opencv这个工具库处理,返回灰度图像(就像你使用本地静态图片一样) 程序启动后,根据监听器信息,使用一个while循环,不断 ...

  5. Android 性能测试初探(五)

    书接上文 Android 性能测试初探之 GPU(四) 前文说了的一些性能测试项大家可能都听说,接下来我们聊聊大家不常关注的测试项- 功耗 . 功耗测试主要从以下几个方面入手进行测试 测试手机安装目标 ...

  6. centos7关闭防火墙以及查看防火墙状态

    1.关闭firewall:systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止fir ...

  7. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  8. PHP统计当前在线用户数实例

    HTML 我们在页面上放置一个显示当前在线人数的div#total以及一个用于展示访客地区分布的列表#onlinelist,默认我们在列表中放置一张与加载动画图片,后面我们用jQuery控制当鼠标滑向 ...

  9. [SDOI2008]沙拉公主的困惑 线性筛 素数+欧拉

    本文为博主原创文章,欢迎转载,请注明出处 www.cnblogs.com/yangyaojia [SDOI2008]沙拉公主的困惑 线性筛 素数+欧拉 题目大意 给定n,m,求在1到n!内与m!互质的 ...

  10. C#--excel操作控件--interop是什么

    这个是微软出的操作excel的类库,为什么这个比NPOI的下载量少这么多?