SwiftUI中NavigationDestination滑动转场失效问题求助

你遇到的转场异常是因为每个页面都单独创建了NavigationStack。SwiftUI的NavigationStack是导航容器，当你在Second_View里再嵌套一个NavigationStack时，它会替换掉当前导航栈的上下文，导致从Second_View跳转Third_View时，不是在原有栈上push新页面，而是直接替换当前视图，所以没有滑动转场。

只在根视图（First_View）中保留一个NavigationStack，子视图（Second_View、Third_View）移除内部的NavigationStack，直接返回页面内容。核心原则是不要嵌套NavigationStack，以下提供两种实现方式：

方式一：根视图统一管理所有导航目的地 #

struct First_View: View {
    @State var secondViewShown = false
    @State var thirdViewShown = false
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Step 1")
                Button(action: { secondViewShown.toggle() }) {
                    Text("Next")
                }
            }
            .navigationDestination(isPresented: $secondViewShown) {
                Second_View(thirdViewShown: $thirdViewShown)
                    .navigationBarHidden(true)
            }
            .navigationDestination(isPresented: $thirdViewShown) {
                Third_View()
                    .navigationBarHidden(true)
            }
        }
    }
}

struct Second_View: View {
    @Binding var thirdViewShown: Bool
    
    var body: some View {
        VStack {
            Text("Step 2")
            Button(action: { thirdViewShown.toggle() }) {
               Text("Next")
            }
        }
    }
}

struct Third_View: View {
    var body: some View {
        VStack {
            Text("Step 3")
        }
    }
}

方式二：子视图内声明自身的导航目的地 #

如果想让子视图自主管理跳转逻辑，也可以在子视图中添加navigationDestination，但同样不能嵌套NavigationStack：

struct First_View: View {
    @State var secondViewShown = false
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Step 1")
                Button(action: { secondViewShown.toggle() }) {
                    Text("Next")
                }
            }
            .navigationDestination(isPresented: $secondViewShown) {
                Second_View()
                    .navigationBarHidden(true)
            }
        }
    }
}

struct Second_View: View {
    @State var thirdViewShown = false
    
    var body: some View {
        VStack {
            Text("Step 2")
            Button(action: { thirdViewShown.toggle() }) {
               Text("Next")
            }
        }
        .navigationDestination(isPresented: $thirdViewShown) {
            Third_View()
                .navigationBarHidden(true)
        }
    }
}

struct Third_View: View {
    var body: some View {
        VStack {
            Text("Step 3")
        }
    }
}

两种方式都能保证所有页面处于同一个导航栈中，跳转时会触发正常的右侧滑动转场效果。

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