使用 SwiftUI 和 GraphQL 克隆 Instagram 应用程序 – HomeView

今天，在使用 GraphQL 的 Instagram 克隆应用程序的第 4 部分中，我们将继续学习 SwiftUI，创建主页视图。

在之前的文章中，我们学习了如何注册用户和如何登录用户，并在 Instagram 克隆应用程序中创建了带有相应用户界面的 “个人资料 “视图。今天，我们将重复使用其中的一些代码，创建一个类似于 UIScrollView 的包含大量内容的视图。

系好安全带，让我们开始吧！

为了更好地学习，请下载带有源代码的iOS Instagram 克隆项目。

想快速入门？

从我们的集线器克隆这个应用程序，即可轻松上手！

我们要构建的内容

我们将构建以下视图：

正如我们之前看到的，SwiftUI 可以让您非常轻松地构建如此复杂的界面，因为您可以非常容易地重用大量组件。这里的关键词是 “重用”。

还记得我们已经编码过的底部栏吗？我们将重用它。其他一切都是新的。

我将不再赘述 VStacks 和 HStacks，如果你错过了这部分内容，请在这里查看。

我们的用户界面组件

这个屏幕基本上由四个组件组成：

• 顶部栏（包含摄像头、Back4Gram 字符串、房屋图标和纸飞机图标）
• 历史栏（包含历史图标）
• 时间轴详细视图（包含实际帖子）
• 底部栏（我们将重复使用）

让我们开始创建这些栏吧！

顶部栏

顶栏由五个部分组成：

• 相机按钮
• Back4Gram 字符串
• 间隔
• 房屋按钮
• 纸飞机按钮

按照已学过的方法添加按钮图标，然后开始编码。

创建 HomeView.swift 文件，然后添加一个 GeometryReader，这样我们就可以很好地调整所有内容的大小了：

就像之前的教程一样，让我们添加一个 VStack，因为所有内容都将在垂直轴上显示：

我们的顶栏将是水平排列的组件组合，因此让我们添加 HStack 来创建它：

最后添加我们将使用的控件：

看起来怎么样？

我们要去的地方！

现在我们来讨论一下

历史栏

历史栏本身就是一个复杂的组件。它就像旧版 UIKit 中的 UIScrollView，但在其内部，我们有一个由图片和图片下方的文本（又称 VStack）组成的控件。让我们创建该结构：

将其放入我们的主 VStack 就像添加 ScrollView 一样简单。为了让它更美观，我们让它只能水平滚动，并隐藏滚动指示器：

最后将其添加到我们的主 VStack 中：

检查外观：

现在，让我们跳到前面，首先添加我们的…

底部栏

现在，让我们享受一下重用性吧。只需将 BottomBar.swift 文件中的内容添加到代码中即可：

以及我们的完整代码：

是不是很简单？看起来怎么样？

Sweeft！

增加复杂性

本视图中最复杂的部分是时间线详细视图。

为了与我们在 TimelineView 中的操作保持一致，让我们创建一个名为 TimlineDetailView.swift 的新文件，并在其中创建一个新的结构体，该结构体将与 TimelineView 中的结构体一样保存数据。

请记住，我们已经在 TimelineView 中声明了预览结构，所以我们也重复使用它。

该结构将接收一个预览，这样我们稍后就可以检索图片链接：

完成这些后，让我们添加视图本身：

主要内容也将放在一个 VStack 中：

该 VStack 将有四个组件：

• 包含徽标、文本和三点按钮的 HStack
• 帖子图片
• 包含心形按钮、评论按钮、纸飞机按钮和旗帜按钮的 HStack
• 一个包含文字 “被……赞 “和 “查看所有评论 “的 VStack。

因此，我们先添加第一个 HStack：

并在其中添加控件：

然后是图片：

带有所有按钮的第二个 HStack：

及其控件：

最后是我们的文本 VStack：

现在，在我们的 TimelineDetailView 中，让我们对几个预览进行硬编码：

最后在 ScrollView 中循环添加我们的 PreviewDetailViews：

最后，将其添加到主页视图中：

最后，让我们看看结果：

太酷了

总结

可重用性是 SwiftUI 的关键。

今天我们学习了如何重用之前文章中的 BottomView 和 Preview 结构。

是时候实现一些功能了，我已经迫不及待了。

敬请期待！

参考资料

• 本系列的第 1 部分是Instagram 克隆应用程序。
• 第 2 部分是Swift Instagram 克隆。
• 第 3 部分是Instagram 简介。
• 第 4 部分是Instagram 主页。
• 下载带有源代码的iOS Instagram克隆项目并开始使用Back4App。

现在就注册Back4App， 开始创建您的Instagram克隆应用程序。