TabView

1. Cơ bản

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

            SearchView()
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }

            ProfileView()
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
    }
}

2. Với Selection

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

    var body: some View {
        TabView(selection: $selectedTab) {
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(0)

            SearchView()
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
                .tag(1)

            ProfileView()
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
                .tag(2)
        }
    }
}

3. Programmatic Tab Switch

struct ContentView: View {
    @State private var selectedTab: Tab = .home

    enum Tab {
        case home, search, cart, profile
    }

    var body: some View {
        TabView(selection: $selectedTab) {
            HomeView(switchToCart: { selectedTab = .cart })
                .tabItem { Label("Home", systemImage: "house") }
                .tag(Tab.home)

            SearchView()
                .tabItem { Label("Search", systemImage: "magnifyingglass") }
                .tag(Tab.search)

            CartView()
                .tabItem { Label("Cart", systemImage: "cart") }
                .tag(Tab.cart)

            ProfileView()
                .tabItem { Label("Profile", systemImage: "person") }
                .tag(Tab.profile)
        }
    }
}

4. Badge

TabView {
    HomeView()
        .tabItem { Label("Home", systemImage: "house") }

    NotificationsView()
        .tabItem { Label("Inbox", systemImage: "envelope") }
        .badge(5)  // Number badge

    CartView()
        .tabItem { Label("Cart", systemImage: "cart") }
        .badge("New")  // Text badge
}

5. Tint Color

TabView {
    // tabs...
}
.tint(.purple)  // Tab icon color

6. Với Navigation

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
                    .navigationTitle("Home")
            }
            .tabItem { Label("Home", systemImage: "house") }

            NavigationStack {
                SettingsView()
                    .navigationTitle("Settings")
            }
            .tabItem { Label("Settings", systemImage: "gear") }
        }
    }
}

7. Page Style

struct OnboardingView: View {
    var body: some View {
        TabView {
            OnboardingPage(title: "Welcome", image: "hand.wave")
            OnboardingPage(title: "Features", image: "star")
            OnboardingPage(title: "Get Started", image: "arrow.right.circle")
        }
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
    }
}

8. Custom Tab Bar

struct CustomTabBar: View {
    @Binding var selectedTab: Int

    var body: some View {
        HStack {
            TabButton(icon: "house", index: 0, selectedTab: $selectedTab)
            TabButton(icon: "magnifyingglass", index: 1, selectedTab: $selectedTab)

            // Center FAB
            Button { } label: {
                Image(systemName: "plus")
                    .font(.title2)
                    .foregroundColor(.white)
                    .frame(width: 56, height: 56)
                    .background(.blue)
                    .clipShape(Circle())
                    .shadow(radius: 4)
            }
            .offset(y: -20)

            TabButton(icon: "bell", index: 2, selectedTab: $selectedTab)
            TabButton(icon: "person", index: 3, selectedTab: $selectedTab)
        }
        .padding(.horizontal)
        .padding(.top, 12)
        .background(.white)
    }
}

struct TabButton: View {
    let icon: String
    let index: Int
    @Binding var selectedTab: Int

    var body: some View {
        Button {
            selectedTab = index
        } label: {
            Image(systemName: icon)
                .font(.title2)
                .foregroundColor(selectedTab == index ? .blue : .gray)
                .frame(maxWidth: .infinity)
        }
    }
}

---

📝 Tóm tắt

Modifier	Mục đích
.tabItem	Define tab label
.tag	Identify tab
.badge	Show badge
.tabViewStyle(.page)	Swipeable pages