visionOS：Ornament内嵌套NavigationStack导致导航异常问题

问题分析 #

在VisionOS 1/iOS 17环境下，当在场景级Ornament内嵌套NavigationStack时，会触发视图层级导航控制器的生命周期冲突：主NavigationStack推入View2的转场过程中，场景级Ornament的视图容器会提前初始化，内部的NavigationStack会创建独立导航控制器，与主栈的转场动画不同步，最终导致unbalanced calls to begin/end appearance transitions日志报错，View2无法正常渲染显示。

可行解决方案 #

方案1：将Ornament锚点改为当前视图 #

把Ornament的attachmentAnchor从.scene改为.view，使Ornament归属于View2的视图层级而非全局场景，让内部NavigationStack与View2同步加载，避免生命周期冲突：

struct View2: View {
    @State private var leftPanelVisibility: Visibility = .visible

    var body: some View {
        VStack {
            // 主视图内容区域
        }
        .ornament(
            visibility: leftPanelVisibility,
            attachmentAnchor: .view(.leading),
            contentAlignment: .trailing
        ) {
            NavigationStack {
                Text("TBD Match")
                    .navigationDestination(for: OrnamentNavItem.self) { item in
                        OrnamentDetailView(item: item)
                    }
            }
            .frame(width: 300)
        }
    }
}

enum OrnamentNavItem {
    case detail
}

struct OrnamentDetailView: View {
    var item: OrnamentNavItem
    var body: some View {
        Text("Ornament Detail")
            .navigationTitle("Detail")
    }
}

方案2：延迟加载Ornament内的NavigationStack #

通过延迟初始化Ornament内的NavigationStack，等待主NavigationStack的转场动画完成后再加载，规避冲突：

struct View2: View {
    @State private var leftPanelVisibility: Visibility = .visible
    @State private var shouldLoadNavStack = false

    var body: some View {
        VStack {
            // 主视图内容区域
        }
        .ornament(
            visibility: leftPanelVisibility,
            attachmentAnchor: .scene(.trailing),
            contentAlignment: .leading
        ) {
            VStack {
                if shouldLoadNavStack {
                    NavigationStack {
                        Text("TBD Match")
                            .navigationDestination(for: OrnamentNavItem.self) { item in
                                OrnamentDetailView(item: item)
                            }
                    }
                } else {
                    ProgressView()
                }
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                shouldLoadNavStack = true
            }
        }
    }
}

方案3：复用主NavigationStack路径 #

若Ornament内的导航无需完全独立，可将其导航目标注册到主NavigationStack中，利用主栈的path完成导航，避免嵌套NavigationStack：

enum NavigationItem {
    case view2
    case ornamentDetail
}

struct RootView: View {
    @State var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            View1()
                .navigationDestination(for: NavigationItem.self) { item in
                    switch item {
                    case .view2:
                        View2(path: $path)
                    case .ornamentDetail:
                        OrnamentDetailView()
                    }
                }
        }
    }
}

struct View2: View {
    @Binding var path: NavigationPath
    @State private var leftPanelVisibility: Visibility = .visible

    var body: some View {
        VStack {
            // 主视图内容区域
        }
        .ornament(
            visibility: leftPanelVisibility,
            attachmentAnchor: .scene(.trailing),
            contentAlignment: .leading
        ) {
            NavigationLink(value: NavigationItem.ornamentDetail) {
                Text("TBD Match")
            }
        }
    }
}

方案选择建议 #

• 若需Ornament严格绑定当前视图，优先选方案1，符合视图层级设计规范
• 若必须保留场景级Ornament，方案2是改动最小的兼容方案
• 若Ornament导航可与主栈共享状态，方案3最简洁，无需维护独立导航路径

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