iOS16 SwiftUI中NavigationStack如何修改默认转场为自定义或淡入？

在iOS16的NavigationStack中，转场效果需要应用在导航目标视图上，而非NavigationStack或NavigationLink本身。结合.transition()修饰符和iOS16新增的.navigationTransition() API，就能轻松替换默认的滑动转场。

一、实现淡入转场效果 #

直接给目标视图添加淡入转场，并通过NavigationStack的.navigationTransition()指定转场触发逻辑，适配导航栈的行为：

import SwiftUI

struct TestView: View {
    var body: some View {
        NavigationStack() {
            NavigationLink("Link", value: "Any Value")
                .navigationDestination(for: String.self) { textValue in
                    DestinationView(textValue: textValue)
                        // 给目标视图添加淡入转场
                        .transition(.opacity)
                }
        }
        // 指定转场类型为push模式，匹配导航栈的跳转逻辑
        .navigationTransition(.push)
    }
}

struct DestinationView: View {
    let textValue: String
    var body: some View {
        Text(textValue)
            .font(.title)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.white)
    }
}

二、实现自定义转场效果 #

如果需要更复杂的转场，比如缩放+淡入的组合动画，可以通过.asymmetric()分别定义页面进入和退出的动画：

import SwiftUI

struct TestView: View {
    var body: some View {
        NavigationStack() {
            NavigationLink("Link", value: "Any Value")
                .navigationDestination(for: String.self) { textValue in
                    DestinationView(textValue: textValue)
                        // 自定义双向转场：进入时缩放+淡入，退出时同理
                        .transition(.asymmetric(
                            insertion: .scale(scale: 0.8).combined(with: .opacity),
                            removal: .scale(scale: 0.8).combined(with: .opacity)
                        ))
                }
        }
        .navigationTransition(.push)
    }
}

struct DestinationView: View {
    let textValue: String
    var body: some View {
        Text(textValue)
            .font(.title)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.white)
    }
}

关键注意点 #

• .navigationTransition(.push)是必须的，它能确保自定义转场和NavigationStack的导航行为同步，避免出现转场异常。
• 可以通过.asymmetric()给页面的进入、退出设置完全不同的动画效果，满足个性化需求。

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