Swift UI：从组件开始解读，TabView 助你轻松构建底部导航栏

2024-02-18 18:30:44

TabView组件简介

Swift UI中的TabView组件是一个容器组件，用于管理和显示多个视图。这些视图可以是任何类型的视图，比如视图控制器、容器视图或自定义视图。TabView组件通常用于创建底部导航栏，因为它可以轻松地在视图之间进行切换，而无需手动管理视图堆栈。

TabView组件的基本使用

要使用TabView组件，需要先创建一个TabView实例，并将其添加到应用程序的视图层次结构中。然后，可以为TabView组件添加多个视图作为其子视图。每个子视图代表一个导航栏选项卡，当用户点击选项卡时，相应的视图将显示在屏幕上。

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                Text("First View")
            }
            .tabItem {
                Label("First", systemImage: "house")
            }

            NavigationView {
                Text("Second View")
            }
            .tabItem {
                Label("Second", systemImage: "person")
            }
        }
    }
}

上面的代码创建了一个简单的TabView组件，其中包含两个子视图。第一个子视图是一个导航视图，其中包含一个文本视图，显示“First View”字样。第二个子视图也是一个导航视图，其中包含一个文本视图，显示“Second View”字样。

当用户点击底部导航栏的“First”选项卡时，第一个子视图将显示在屏幕上。当用户点击“Second”选项卡时，第二个子视图将显示在屏幕上。

TabView组件的自定义

TabView组件支持丰富的自定义选项，允许开发者根据应用程序的具体需求进行调整。

1. 选项卡样式

开发者可以使用tabViewStyle修饰符来修改选项卡的样式。有两种内置的选项卡样式：PageIndexViewStyle和PageTabViewStyle。

PageIndexViewStyle：选项卡以圆形按钮的形式显示在底部导航栏中。
PageTabViewStyle：选项卡以标签的形式显示在底部导航栏中。

2. 选项卡内容

开发者可以使用tabItem修饰符来自定义选项卡的内容。tabItem修饰符可以接受一个Label类型的参数，用于指定选项卡的标签和图标。

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                Text("First View")
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }

            NavigationView {
                Text("Second View")
            }
            .tabItem {
                Label("Profile", systemImage: "person")
            }
        }
        .tabViewStyle(PageTabViewStyle())
    }
}