SwiftUI 100：巧用 Tab Bar 搭建你的热门社交圈

IOS

2024-01-14 22:51:29

准备好用 SwiftUI 打造一款让你瞬间脱颖而出的社交应用了吗？跟随我们，踏上这次引人入胜的旅程，利用 Tab Bar 构建一个惊艳的社交界面，让你的人际交往更上一层楼！

开启 SwiftUI 之旅

SwiftUI 是苹果公司开发的一款先进的 UI 框架，它让构建迷人的用户界面变得轻而易举。这款强大的工具提供了直观的语法和声明式编程范例，让你可以轻松实现复杂而优雅的界面。

构建 Tab Bar

Tab Bar 是一个位于屏幕底部的导航元素，它提供了一种便捷的方式在应用程序的不同部分之间切换。对于社交应用来说，Tab Bar 是一个理想的选择，因为它允许用户轻松访问不同的功能区域，而无需离开当前页面。

在本教程中，我们将构建一个包含四个选项卡的 Tab Bar：

遇见的人： 展示你最近与之互动的人员列表。
已联络的人： 显示你已建立联系的人员列表。
尚未接触的人： 显示你还没有联系的人员列表。
我的个人信息： 包含你的个人详细信息，以便其他人可以扫描。

SwiftUI 视图

SwiftUI 视图是 UI 构建块，它们了屏幕上的内容。对于我们的社交应用，我们将使用三个概念上相似的视图来表示前三个选项卡，并使用一个不同的视图来表示我的个人信息选项卡。

编写 SwiftUI 代码

以下是实现 Tab Bar 的 SwiftUI 代码：

struct ContentView: View {
    var body: some View {
        TabView {
            PeopleMetView()
                .tabItem {
                    Label("遇见的人", systemImage: "person.2.fill")
                }
            PeopleContactedView()
                .tabItem {
                    Label("已联络的人", systemImage: "phone.fill")
                }
            PeopleNotYetReachedView()
                .tabItem {
                    Label("尚未接触的人", systemImage: "person.crop.circle.badge.xmark")
                }
            MyInfoView()
                .tabItem {
                    Label("我的个人信息", systemImage: "person.circle.fill")
                }
        }
    }
}