Skip to content

创建列表行视图

我们在本文中构建的第一个视图是用于显示每个地标详情的行视图。 行视图将地标数据存储在 landmark 属性中,这样一个行视图就可以显示任何地标。稍后我们会把多个行视图组合成一个地标列表。

第 1 步

Views 目录中创建一个名为 LandmarkRow.swift 的 SwiftUI View 文件。

第 2 步

如果预览没有显示,通过选择 Editor > Canvas 来显示画布,然后点击 Resume

第 3 步

LandmarkRow 添加一个存储属性 landmark

当添加 landmark 属性时,预览会停止工作,因为这时候,预览的 LandmarkRow() 方法在初始化时需要一个 landmark 参数。

为了恢复预览,需要修改 PreviewProvider

第 4 步

LandmarkRow_Previews 的预览静态属性中,为 LandmarkRow 初始化方法添加 landmark 参数,指定值为 landmarks 数组的第一个元素。

这时重新启动预览,显示的文字是:hello,world!

修复预览的错误后,我们继续构建行视图的布局。

第 5 步

将现有的文本视图嵌入一个 HStack 中。

第 6 步

将文字视图的内容修改成 landmark.name

第 7 步

在文本视图前面添加一个图像,并在其之后添加 Spacer,来完成行视图。

创建列表行视图 has loaded