SwiftUI选项卡式视图切换TabView

在 SwiftUI 中，TabView 是一个用于创建选项卡式界面的容器视图，通常用于在多个视图之间切换。它提供了一种简单的方式来组织和导航应用的主要功能。

TabView 的基本用法

以下是一个最简单的 TabView 示例：

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("首页内容")
                .tabItem {
                    Label("首页", systemImage: "house")
                }

            Text("搜索内容")
                .tabItem {
                    Label("搜索", systemImage: "magnifyingglass")
                }

            Text("设置内容")
                .tabItem {
                    Label("设置", systemImage: "gear")
                }
        }
    }
}

#Preview {
    ContentView()
}

tabItem 修饰符：用于为每个选项卡指定标签和图标。

Label 是用于显示文本和图标的标准方式。

可以使用系统图标（如 systemImage: “house”) 或自定义图像。

支持状态切换的 TabView

可以通过 @State 来动态更改 TabView 的当前选项卡。例如：

struct ContentView: View {
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            Text("首页内容")
                .tabItem {
                    Label("首页", systemImage: "house")
                }
                .tag(0) // 给每个选项卡一个标记

            Text("搜索内容")
                .tabItem {
                    Label("搜索", systemImage: "magnifyingglass")
                }
                .tag(1)

            Text("设置内容")
                .tabItem {
                    Label("设置", systemImage: "gear")
                }
                .tag(2)
        }
    }
}

selection 修饰符：与 @State 属性绑定，允许程序控制显示的选项卡。

tag 修饰符：标记选项卡的唯一值，用于识别当前选项卡。

自定义样式

可以使用 .tabItem 结合自定义样式来美化选项卡。例如：

TabView {
    Text("Tab 1")
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("第一")
        }

    Text("Tab 2")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("第二")
        }
}
.tint(.red) // 修改 TabView 的高亮颜色

嵌套 NavigationStack 与 TabView

通常，TabView 会结合 NavigationStack 使用，以支持导航功能：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                Text("首页内容")
                    .navigationTitle("首页")
            }
            .tabItem {
                Label("首页", systemImage: "house")
            }

            NavigationStack {
                Text("设置内容")
                    .navigationTitle("设置")
            }
            .tabItem {
                Label("设置", systemImage: "gear")
            }
        }
    }
}

动态选项卡

TabView 的内容可以动态生成。例如：

struct ContentView: View {
    let tabs = ["首页", "搜索", "设置"]

    var body: some View {
        TabView {
            ForEach(tabs, id: \.self) { tab in
                Text("\(tab)内容")
                    .tabItem {
                        Label(tab, systemImage: "circle")
                    }
            }
        }
    }
}

注意事项

1、iOS 版本支持：TabView 在 iOS 13 及以上可用。

2、性能优化：如果选项卡的内容较多或视图复杂，使用懒加载（如 LazyVStack）可以优化性能。

3、视觉冲突：如果嵌套了多个容器视图（如 TabView 和 NavigationView），需要注意避免导航栏或标签栏的重叠。