Skip to content

创建和组合视图

本部分将指导你构建 Landmarks -一个用于发现和分享你所喜爱的地方的应用程序。你将从构建显示地标细节的视图开始。

为了布置视图,Landmarks 使用 stacks 来组合和分层 ImageText 视图组件。为了在视图中添加地图,你将包括一个标准的 MapKit 组件。当你完善视图的设计时,Xcode 提供了实时反馈,所以你可以看到这些变化如何转化为代码。

下载项目文件来开始构建这个项目,并按照下面的步骤进行。

  • 预计完成时间:40 分钟
  • 初始项目文件:下载

1. 创建一个新项目并且浏览画布

创建一个新的 Xcode 项目,使用 SwiftUI。浏览画布、预览和 SwiftUI 模板代码。

为了在 Xcode 中预览和与画布中的视图互动,并使用整个教程中描述的所有最新功能,请确保你的 Mac 运行 macOS Catalina 10.15 或更高版本。

第 1 步

打开 Xcode,在 Xcode 的启动窗口点击 Create a new Xcode project,或者选择 File > New > Project

第 2 步

选择 iOS 平台,选择 App 模板,然后点击 Next

第 3 步

输入 Landmarks 作为项目名称,Interface 选择 SwiftUI,Language 选择 Swift,然后点击 Next。选择一个目录来保存此项目。

第 4 步

在项目导航栏中,选择 LandmarksApp.swift 文件。

使用 SwiftUI 开发的应用,生命周期具有符合 App 协议的结构体(struct)。该结构体的 body 属性会返回一个或多个场景,这些场景又会提供显示内容。 @main 属性标识应用程序的入口点。

第 5 步

在项目导航栏中,选择 ContentView.swift

默认情况下,SwiftUI 视图文件声明了两个结构体。第一个结构体符合 View 协议,描述了视图的内容和布局。第二个结构体为该视图声明了一个预览。

第 6 步

在画布上,点击 Resume 来显示预览。

提示

如果画布没有显示,选择 导航栏 > Editor > Canvas 来显示。

第 7 步

body 属性中,将 Hello, World! 改为自己的问候语。

当你改变代码时,预览会实时更新。

创建和组合视图 has loaded