SwiftUI中如何实现Tab Bar显示与隐藏的动画效果？

要解决TabBar消失和重现都有动画的问题，你需要采用**状态驱动+withAnimation**的方式，替代已废弃的直接在视图上添加animation修饰符的做法。以下是具体实现方案：

核心思路 #

通过一个状态变量控制TabBar的显示状态，在进入详情页和返回列表页时，用withAnimation包裹状态变化，让TabBar的显示/隐藏都触发平滑过渡。

完整代码示例 #

// 补全示例所需的AppTab枚举定义
enum AppTab: Hashable {
    case tabone, tabtwo, tabthree
    
    var title: String {
        switch self {
        case .tabone: return "Tab 1"
        case .tabtwo: return "Tab 2"
        case .tabthree: return "Tab 3"
        }
    }
    
    var iconName: String {
        switch self {
        case .tabone: return "house"
        case .tabtwo: return "person"
        case .tabthree: return "gear"
        }
    }
}

struct ContentView: View {
    @State private var selectedTab: AppTab = .tabone // 补全初始值

    var body: some View {
        TabView(selection: $selectedTab) {
            TabOne()
                .tabItem {
                    Label(AppTab.tabone.title, systemImage: AppTab.tabone.iconName)
                }
                .tag(AppTab.tabone) // 修正原代码的.tab为.tag，TabView需配合tag实现标签切换

            TabTwo()
                .tabItem {
                    Label(AppTab.tabtwo.title, systemImage: AppTab.tabtwo.iconName)
                }
                .tag(AppTab.tabtwo)

            TabThree()
                .tabItem {
                    Label(AppTab.tabthree.title, systemImage: AppTab.tabthree.iconName)
                }
                .tag(AppTab.tabthree)
        }
    }
}

struct TabOne: View {
    @State private var hideTabBar = false

    var body: some View {
        NavigationStack {
            NavigationLink(destination: {
                DetailView()
                    // 进入详情页时，带动画隐藏TabBar
                    .onAppear {
                        withAnimation(.easeInOut(duration: 0.5)) {
                            hideTabBar = true
                        }
                    }
                    // 返回列表页时，带动画显示TabBar
                    .onDisappear {
                        withAnimation(.easeInOut(duration: 0.5)) {
                            hideTabBar = false
                        }
                    }
            }, label: {
                Label("Details", systemImage: "person.crop.circle")
            })
        }
        // 绑定TabBar的显示状态到状态变量
        .toolbar(hideTabBar ? .hidden : .visible, for: .tabBar)
    }
}

struct DetailView: View {
    var body: some View {
        Text("Details View")
            .navigationTitle("Details")
    }
}

struct TabTwo: View {
    var body: some View {
        Text("Tab Two")
    }
}

struct TabThree: View {
    var body: some View {
        Text("Tab Three")
    }
}

关键说明 #

1. 修正原代码问题：原代码中.tab(AppTab.tabone)应为.tag(AppTab.tabone)，TabView的selection必须配合tag才能正确切换标签页。
2. 状态驱动动画：用@State private var hideTabBar控制TabBar的显示/隐藏，所有状态变化都包裹在withAnimation中，确保动画双向生效（进入时隐藏、返回时显示）。
3. 规避废弃API：不再使用已废弃的直接在视图上添加animation修饰符的方式，遵循SwiftUI状态驱动动画的最佳实践。

内容的提问来源于stack exchange，提问作者Pieter