你能够运用 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") }
    }
}

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