如何同步NavigationView内外转场动画？自定义Tab栏与详情页适配问题

我的第一个视图（红色）底部设有自定义Tab栏（蓝色），当详情视图（黄色）被推入导航栈时，该Tab栏会隐藏。当前存在的问题是：详情视图初始高度与第一个视图一致，转场完成后会无动画地调整自身高度。想请教：

• 如何让详情视图随底部Tab栏一同执行高度增长的动画？
• 若此方案不可行，能否让详情视图在转场开始前而非结束后调整高度？

原代码：

struct ContentView: View {
    @State var showDetail: Bool = false
    var body: some View {
        VStack {
            NavigationStack {
                ZStack {
                    Color.red
                    Button {
                        withAnimation { showDetail = true }
                    } label: {
                        Text("Detail View")
                            .font(.largeTitle)
                            .foregroundStyle(Color.white)
                    }
                }
                .background {
                    NavigationLink(destination: Color.yellow, isActive: $showDetail) {
                        EmptyView()
                    }
                }
            }
            Color.blue.frame(height: showDetail ? 0 : 150)
        }
    }
}

#Preview {
    ContentView()
}

方案一：让详情视图与Tab栏动画同步 #

核心思路是把NavigationStack的高度变化和Tab栏的动画绑定到同一个状态变量，让两者的动画节奏完全同步，避免详情视图后期无动画调整。

修改后的代码：

struct ContentView: View {
    @State var showDetail: Bool = false
    private let tabBarHeight: CGFloat = 150
    
    var body: some View {
        VStack(spacing: 0) {
            NavigationStack {
                ZStack {
                    Color.red
                    Button {
                        withAnimation(.easeInOut) {
                            showDetail = true
                        }
                    } label: {
                        Text("Detail View")
                            .font(.largeTitle)
                            .foregroundStyle(Color.white)
                    }
                }
                .background {
                    NavigationLink(
                        destination: DetailView(isShowingDetail: $showDetail),
                        isActive: $showDetail
                    ) {
                        EmptyView()
                    }
                }
            }
            .frame(height: showDetail ? UIScreen.main.bounds.height : UIScreen.main.bounds.height - tabBarHeight)
            .animation(.easeInOut, value: showDetail)
            
            Color.blue
                .frame(height: showDetail ? 0 : tabBarHeight)
                .animation(.easeInOut, value: showDetail)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct DetailView: View {
    @Binding var isShowingDetail: Bool
    
    var body: some View {
        ZStack {
            Color.yellow
            Button {
                withAnimation(.easeInOut) {
                    isShowingDetail = false
                }
            } label: {
                Text("Back")
                    .font(.largeTitle)
                    .foregroundStyle(Color.white)
            }
        }
        .frame(maxHeight: .infinity)
    }
}

#Preview {
    ContentView()
}

关键改动：

• 给NavigationStack添加基于showDetail的高度动画，转场时同步拉伸至全屏
• Tab栏和NavigationStack使用相同的动画曲线与状态变量，保证动画同步
• 详情视图用maxHeight: .infinity直接占据可用空间，避免后期布局调整

方案二：转场前提前完成高度调整 #

如果希望先完成Tab栏的隐藏动画，再推入详情视图，可以拆分状态变量，通过延迟激活导航链接实现。

修改后的代码：

struct ContentView: View {
    @State var showDetail: Bool = false
    @State var isTabBarHidden: Bool = false
    private let tabBarHeight: CGFloat = 150
    private let animationDuration: Double = 0.3
    
    var body: some View {
        VStack(spacing: 0) {
            NavigationStack {
                ZStack {
                    Color.red
                    Button {
                        withAnimation(.easeInOut(duration: animationDuration)) {
                            isTabBarHidden = true
                        }
                        // 等Tab栏动画完成后再激活详情视图
                        DispatchQueue.main.asyncAfter(deadline: .now() + animationDuration) {
                            showDetail = true
                        }
                    } label: {
                        Text("Detail View")
                            .font(.largeTitle)
                            .foregroundStyle(Color.white)
                    }
                }
                .background {
                    NavigationLink(destination: Color.yellow, isActive: $showDetail) {
                        EmptyView()
                    }
                }
            }
            .frame(height: isTabBarHidden ? UIScreen.main.bounds.height : UIScreen.main.bounds.height - tabBarHeight)
            
            Color.blue
                .frame(height: isTabBarHidden ? 0 : tabBarHeight)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

#Preview {
    ContentView()
}

关键改动：

• 用isTabBarHidden单独控制Tab栏和主视图的高度动画
• 通过DispatchQueue.main.asyncAfter延迟激活详情视图，确保高度调整完成后再转场
• 详情视图推入时已处于全屏环境，不会出现后期高度变化

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