通过 SwiftUI 实现 Tab Bar

你可以使用 UIKit 的方式来编写自己的自定义标签栏，但使用 SwiftUI 的方式会让它变得更加简单。在本教程中，我们将介绍如何实现内置的标签栏视图，以及如何在任何视图的预览中显示标签栏视图。

官方文档说明

以下几点是苹果官方文档关于标签栏的高级最佳实践技巧:

• 使用标签栏来支持导航，而不是提供操作(action)
• 确保当用户浏览应用的不同区域时，标签栏是可见的
• 使用最少数量的标签来帮助用户浏览应用(官方建议:一般来说，在 iOS 中最多使用 5 个标签，在 visionOS、iPadOS 和 tvOS 中最多使用 6 个标签)
• 即使内容不可用，也要保持标签可见
• 为每个标签标题使用简洁的术语
• 使用 badge 进行不显眼的交流

使用默认 TabView 允许我们的代码在除 MacOS 和 WatchOS 之外的所有 Apple 平台上工作。

想要了解更多关于标签栏的信息，请看这里的人机界面指南。

初始化设置

对于我们的初始设置，我们将创建一个视图，我们将在创建标签视图时使用它。这个视图将是一个简单的文本视图列表：

struct MoreView: View {
    var body: some View {
        List {
            Text("Thing 1")
            Text("Thing 2")
            Text("Thing 3")
            Text("Thing 4")
            Text("Thing 5")
        }
    }
}

#Preview {
    MoreView()
}

效果图如下：

通过 SwiftUI 创建标签视图

苹果让在视图底部添加标签栏变得非常简单！因为它是一个内置组件。在下面的示例中，我们在应用程序的根视图中创建一个 TabView。从那里我们向 TabView 添加四个标签。这些标签可以是任何视图，在下面的示例中，我们使用 3 个文本视图和一个在初始设置步骤中制作的自定义视图。

与创建自己的 TabView 相比，使用内置 TabView 有几个好处：

• 默认情况下适用于无障碍文本大小
• 适用于多个 Apple 平台（包括 VisionOS）
• 快速且易于实施

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Home")
                .tabItem {
                    Label("Home", systemImage: "house")
                }
            
            Text("Alerts")
                .tabItem {
                    Label("Alerts", systemImage: "bell")
                }
            
            Text("Settings")
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
            
            MoreView()
                .tabItem {
                    Label("More", systemImage: "list.bullet")
                }
        }
    }
}

#Preview {
    ContentView()
}

效果图如下：

通过 SwiftUI 给 TabView 添加 badge

你可能想要使用的另一种常见设计模式是让用户知道他们有需要检查的内容。通过向任何标签添加 badge 修饰符，可以在 TabView 中轻松完成此操作。

在下面的示例中，我们在 Alerts 标签中添加了一个带有数字 7 的 badge 数，表示 Alerts 标签中有 7 个新内容：

struct ContentView: View {
    var body: some View {
        TabView {
            ...
            Text("Alerts")
                .tabItem {
                    Label("Alerts", systemImage: "bell")
                }
                .badge(7)
            
            ...
        }
    }
}

#Preview {
    ContentView()
}

效果图如下：

Tab Bar 在预览中可见

假设我们正在开发 MoreView，想看看我们的视图在 TabView 中是什么样子。为了看到我们的变化，我们可以在 TabView 中包装预览，甚至可以使用我们期望在 ContentView 中看到的相同图标。

//  MoreView.swift
import SwiftUI

struct MoreView: View {
    var body: some View {
        List {
            Text("Thing 1")
            Text("Thing 2")
            Text("Thing 3")
            Text("Thing 4")
            Text("Thing 5")
        }
    }
}

#Preview {
    TabView {
        MoreView()
            .tabItem { Label("More", systemImage: "list.bullet") }
    }
}

效果图如下：

好了，本文到这里全部内容就结束了。希望本篇文章的内容会对大家有所帮助！😄