SwiftUI视图层级不变时带动画的可编程导航实现咨询

我懂你做Anki类语言练习App的需求——就是要顺着单词列表无限往下切换，而且切换的时候得有流畅的导航动画，对吧？看你现在的代码思路是用NavigationStack的path手动管理导航栈，不过这里确实有几个可以优化的点，也能解决你可能遇到的动画不流畅、状态同步混乱的问题。

先说说你当前代码的潜在问题：

• 你现在用path.removeLast()再append(page)，本质是先退回到上一页再前进，视觉上可能会出现两次动画（后退+前进），体验不太顺滑
• page变量和path导航栈的状态是分开维护的，万一用户手动点了系统返回键，page的值就会和栈里的内容不匹配，很容易出bug

给你几个适配不同场景的优化方案：

场景1：不需要回退到之前的单词（无限前进） #

如果你的App是纯线性的——用户做完一个单词就往下走，不需要回头复习，那完全不用每次往导航栈里加新页面，直接用单页面+状态驱动内容更新，再配合动画就好，性能和体验都更好：

struct ContentView: View {
    @State private var currentWordIndex = 0
    // 替换成你的真实单词数据源
    let exerciseWords = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
    
    var body: some View {
        NavigationStack {
            WordExerciseView(word: exerciseWords[currentWordIndex])
                .navigationTitle("语言练习")
                .toolbar {
                    ToolbarItem(placement: .primaryAction) {
                        Button("完成，下一个") {
                            withAnimation(.slide) {
                                // 无限循环，到最后一个单词后回到第一个
                                currentWordIndex = (currentWordIndex + 1) % exerciseWords.count
                            }
                        }
                    }
                }
        }
    }
}

struct WordExerciseView: View {
    let word: String
    
    var body: some View {
        VStack(spacing: 30) {
            Text("当前单词：\(word)")
                .font(.largeTitle)
                .bold()
            // 这里放你的练习内容：比如拼写输入、选择题、发音按钮之类的
            Button("验证答案") {
                // 这里加你的练习验证逻辑，比如检查拼写是否正确
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .transition(.slide) // 内容切换的过渡动画
    }
}

这种方式下，整个导航栈里只有一个页面，所有切换都是通过更新currentWordIndex来驱动内容变化，用withAnimation和transition实现流畅的切换效果，完全不用管导航栈的复杂操作，状态也不会乱。

场景2：需要保留导航栈（支持回退复习） #

如果用户需要能回退到之前的单词复习，那还是得用导航栈，但可以优化path的管理方式，避免两次动画的问题：

struct ContentView: View {
    @State private var path = NavigationPath()
    let exerciseWords = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
    
    var body: some View {
        NavigationStack(path: $path) {
            // 初始页面直接显示第一个单词
            WordExerciseView(word: exerciseWords[0])
                .navigationDestination(for: Int.self) { index in
                    WordExerciseView(word: exerciseWords[index % exerciseWords.count])
                        .toolbar {
                            ToolbarItem(placement: .primaryAction) {
                                Button("下一个单词") {
                                    withAnimation {
                                        // 直接往栈里加下一个单词的索引，系统自动处理前进动画
                                        path.append((index + 1) % exerciseWords.count)
                                    }
                                }
                            }
                        }
                        // 如果不想让用户手动回退，可以隐藏返回按钮
                        // .navigationBarBackButtonHidden(true)
                }
                .navigationTitle("语言练习")
        }
    }
}

这里直接往path里append下一个单词的索引，系统会自动播放标准的前进导航动画，用户也能通过系统返回键回到之前的单词页面。如果不想让用户回退，只需要在练习视图里加上.navigationBarBackButtonHidden(true)就行。

补充：替换栈顶元素（避免栈无限变长） #

如果你既想保留前进动画，又不想让导航栈无限变长（比如怕内存占用过大），可以用iOS 16+支持的path.replaceLast(with:)方法，直接替换栈顶元素，一次操作完成，动画也更流畅：

// 把你原来的Next button逻辑换成这个
Button("Next page") {
    let nextPage = page + 1
    withAnimation {
        path.replaceLast(with: nextPage)
    }
    page = nextPage
}

这个方法专门用来替换导航栈的最后一个元素，视觉上就是直接更新当前页面的内容，同时保留流畅的导航动画，比你之前手动removeLast()再append()优雅太多，也不会有两次动画的问题。

最后再提个小建议：尽量不要用单独的page变量跟踪当前页面，而是直接从path的最后一个元素取值，这样不管是代码操作还是用户手动返回，状态都是同步的，比如：

var currentPage: Int {
    path.last as? Int ?? 0
}

备注：内容来源于stack exchange，提问作者Maksim Gayduk