如何修改SwiftUI页面转场动画方向？使ContentView2从左侧滑入

要让ContentView2从左侧滑入而非默认的右侧，需要自定义转场动画，以下是两种适配不同iOS版本的解决方案：

方案一：兼容iOS 13+ #

通过绑定状态控制视图显示，结合overlay和transition实现自定义转场：

import SwiftUI

struct ContentView1: View {
    @State private var isShowingView2 = false
    
    var body: some View {
        NavigationView {
            ZStack {
                // 隐藏默认NavigationLink，仅用于绑定导航状态
                NavigationLink(destination: EmptyView(), isActive: $isShowingView2) {
                    EmptyView()
                }
                
                Button(action: {
                    // 触发动画显示视图
                    withAnimation(.easeInOut) {
                        isShowingView2 = true
                    }
                }) {
                    Text("Hello, World!")
                }
                .navigationBarTitle("One")
            }
            // 叠加ContentView2，设置左侧滑入转场
            .overlay(
                Group {
                    if isShowingView2 {
                        ContentView2()
                            .transition(.move(edge: .leading))
                            .zIndex(1)
                    }
                }
            )
        }
    }
}

struct ContentView2: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        ZStack {
            Color.white.edgesIgnoringSafeArea(.all)
            Text("Hello, World #2!")
            Button(action: {
                // 触发动画返回上一页
                withAnimation(.easeInOut) {
                    presentationMode.wrappedValue.dismiss()
                }
            }) {
                Text("返回")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
    }
}

说明 #

• 用isActive绑定控制导航状态，规避系统默认转场逻辑
• 通过overlay添加目标视图，设置.transition(.move(edge: .leading))实现左侧滑入
• 用withAnimation包裹状态变更，保证转场动画平滑生效
• 手动处理返回按钮的动画逻辑，确保进出转场效果一致

方案二：适配iOS 16+（推荐） #

利用iOS 16新增的NavigationStack和navigationDestination，结合Transaction精准控制转场：

import SwiftUI

struct ContentView1: View {
    @State private var isShowingView2 = false
    
    var body: some View {
        NavigationStack {
            Button(action: {
                var transaction = Transaction()
                transaction.animation = .easeInOut
                // 用Transaction自定义转场动画参数
                withTransaction(transaction) {
                    isShowingView2 = true
                }
            }) {
                Text("Hello, World!")
            }
            .navigationBarTitle("One")
            // 指定目标视图并设置转场效果
            .navigationDestination(isPresented: $isShowingView2) {
                ContentView2()
                    .transition(.move(edge: .leading))
            }
        }
    }
}

struct ContentView2: View {
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        Text("Hello, World #2!")
            .navigationBarBackButtonHidden(true)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("返回") {
                        var transaction = Transaction()
                        transaction.animation = .easeInOut
                        withTransaction(transaction) {
                            dismiss()
                        }
                    }
                }
            }
    }
}

说明 #

• NavigationStack提供了更灵活的导航控制能力，替代旧版NavigationView
• 通过Transaction自定义动画参数，配合transition实现左侧滑入效果
• 隐藏系统默认返回按钮，手动实现带动画的返回逻辑，保证交互一致性

内容的提问来源于stack exchange，提问作者Gearóid Ó Ceallaigh