SwiftUI中如何正确使用NavigationStack、NavigationPath实现导航并优化状态管理？

针对你遇到的两个问题，这里提供更符合SwiftUI最佳实践的实现方式：

核心优化点 #

• 用ObservableObject封装导航状态与业务数据，替代多层@Binding传递，让状态逻辑集中且视图解耦
• 统一在NavigationStack根层级注册navigationDestination，避免子视图注册导致的路径异常与动画问题

完整实现代码 #

import SwiftUI

// 定义导航目标枚举
enum NavDestination {
    case addRoomName
    case addRoomSuccess
}

// 导航视图模型，集中管理状态与导航逻辑
class NavigationViewModel: ObservableObject {
    @Published var path = NavigationPath()
    @Published var newRoomName = ""
    
    // 导航到添加房间页
    func pushToAddRoom() {
        path.append(NavDestination.addRoomName)
    }
    
    // 导航到成功页
    func pushToRoomSuccess() {
        path.append(NavDestination.addRoomSuccess)
    }
    
    // 返回根视图
    func popToRoot() {
        path.removeAll()
        // 清空输入内容，可选操作
        newRoomName = ""
    }
}

struct RootView: View {
    @StateObject private var vm = NavigationViewModel()
    
    var body: some View {
        NavigationStack(path: $vm.path) {
            VStack {
                Button(action: vm.pushToAddRoom) {
                    Text("Add Room")
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.red)
                        .cornerRadius(40)
                }
            }
            .navigationTitle("Root Page")
            // 统一在根层级注册所有导航目标
            .navigationDestination(for: NavDestination.self) { destination in
                switch destination {
                case .addRoomName:
                    AddRoomView(vm: vm)
                case .addRoomSuccess:
                    RoomSuccessView(vm: vm)
                }
            }
        }
    }
}

struct AddRoomView: View {
    let vm: NavigationViewModel
    
    var body: some View {
        VStack {
            Text("Add Room Name")
            Spacer()
            TextField("My new Room", text: $vm.newRoomName)
                .padding()
                .textInputAutocapitalization(.words)
                .background(Color.gray.opacity(0.1))
                .cornerRadius(20)
            Spacer()
            Button(action: vm.pushToRoomSuccess) {
                Text("Go to Success")
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.red)
                    .cornerRadius(40)
            }
        }
    }
}

struct RoomSuccessView: View {
    let vm: NavigationViewModel
    
    var body: some View {
        VStack {
            Text("Room Success Page")
            Spacer()
            Text("The passed newRoomName: \(vm.newRoomName)")
            Spacer()
            Button(action: vm.popToRoot) {
                Text("Back To Root")
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.red)
                    .cornerRadius(40)
            }
        }
    }
}

struct RootView_Previews: PreviewProvider {
    static var previews: some View {
        RootView()
    }
}

优化说明 #

1. 状态管理优化：

   • 将newRoomName和导航路径path统一封装到NavigationViewModel中，视图通过引用ViewModel访问状态，避免了多层@Binding传递的繁琐，同时状态逻辑更集中，便于后续扩展（比如添加更多导航目标或业务逻辑）。
   • 使用@StateObject在根视图创建ViewModel，确保其生命周期与视图一致，子视图只需接收ViewModel实例即可。

2. 路由异常解决：

   • 所有navigationDestination都在NavigationStack的根层级注册，SwiftUI要求导航目标注册必须在NavigationStack的范围内，子视图注册会导致路径管理混乱，进而引发动画异常（比如返回根后再次导航的左滑入问题）。
   • 用NavigationPath替代数组类型的路径，它是SwiftUI专门为导航设计的类型，内部处理更高效，清空路径用removeAll()比手动移除所有元素更稳妥。

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