为ViewBuilder Switch视图切换添加导航式过渡动画

方案一：使用NavigationStack + NavigationPath（iOS 16+ 最优解） #

利用SwiftUI原生导航栈的特性，通过NavigationPath管理导航状态，系统会自动提供与NavigationLink一致的滑动过渡动画，同时保留导航上下文（如返回按钮、栈管理），这是最符合SwiftUI设计范式的实现方式。

修改后代码示例：

// 先确保枚举遵循Hashable协议
enum SomeEnum: Hashable {
    case case1, case2, case3, case4
}

struct ContentView: View {
    @State private var navigationPath = NavigationPath()
    @State private var currentCase: SomeEnum = .case1
    
    var body: some View {
        NavigationStack(path: $navigationPath) {
            // 放置触发视图切换的控件（按钮、Tab等）
            VStack(spacing: 20) {
                Button("切换到Case 2") {
                    currentCase = .case2
                    navigationPath.append(currentCase)
                }
                Button("切换到Case 3") {
                    currentCase = .case3
                    navigationPath.append(currentCase)
                }
            }
            .navigationDestination(for: SomeEnum.self) { enumCase in
                targetView(for: enumCase)
            }
        }
    }
    
    @ViewBuilder private func targetView(for case: SomeEnum) -> some View {
        switch `case` {
        case .case1:
            View1()
        case .case2:
            View2()
        case .case3:
            View3()
        case .case4:
            View4()
        }
    }
}

// 示例子视图（可按需自定义）
struct View1: View {
    var body: some View {
        Text("View 1 Content")
            .navigationTitle("Case 1")
    }
}

struct View2: View {
    var body: some View {
        Text("View 2 Content")
            .navigationTitle("Case 2")
    }
}

// View3、View4实现类似

如果不需要显示导航栏，可在NavigationStack内添加.navigationBarHidden(true)修饰符。

方案二：自定义滑动过渡动画（兼容iOS 15及以下） #

若需兼容旧系统或无需导航栈上下文，可通过自定义过渡效果模拟原生导航的滑动动画：

代码示例：

enum SomeEnum {
    case case1, case2, case3, case4
}

struct ContentView: View {
    @State private var currentCase: SomeEnum = .case1
    @State private var isForwardTransition = true // 控制前进/后退的过渡方向
    
    var body: some View {
        ZStack {
            currentView
        }
        .animation(.easeInOut(duration: 0.3), value: currentCase)
    }
    
    @ViewBuilder private var currentView: some View {
        switch currentCase {
        case .case1:
            View1()
                .transition(.push(from: isForwardTransition ? .trailing : .leading))
                .onTapGesture {
                    isForwardTransition = true
                    currentCase = .case2
                }
        case .case2:
            View2()
                .transition(.push(from: isForwardTransition ? .trailing : .leading))
                .onTapGesture {
                    isForwardTransition = false
                    currentCase = .case1
                }
        case .case3:
            View3()
                .transition(.push(from: isForwardTransition ? .trailing : .leading))
        case .case4:
            View4()
                .transition(.push(from: isForwardTransition ? .trailing : .leading))
        }
    }
}

// 自定义Push过渡效果，模拟原生导航滑动
extension AnyTransition {
    static func push(from edge: Edge) -> AnyTransition {
        .asymmetric(
            insertion: .move(edge: edge),
            removal: .move(edge: edge == .trailing ? .leading : .trailing)
        )
    }
}

// 子视图实现同方案一

方案选择建议 #

• 优先选择方案一：原生导航栈的过渡动画更自然，且支持导航栈的所有特性（如返回、栈深度管理），符合SwiftUI的设计模式。
• 若需兼容iOS 15及以下或无需导航上下文，可使用方案二自定义过渡。

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