visionOS嵌套导航：指定视图栈及NavigationSplitView仿样式方案

问题描述 #

在visionOS中，我尝试用NavigationView实现带选项的导航结构，点击内部NavigationLink时，LessonDetail会被推到顶层NavigationStack，导致左侧菜单丢失。代码如下：

NavigationView {
    List(courseMetadata.lessons, selection: $selection) { lesson in
        NavigationLink {
            LessonDetail(lesson: lesson)
        } label: {
            LessonRow(lesson: lesson)
        }
    }
    .navigationTitle("Main title")
}
.navigationTitle(course.fullTitle)

改用NavigationSplitView后，布局符合预期，但丢失了NavigationView自带的系统样式（容器背景、水平分隔线、Chevron图标等），代码如下：

NavigationSplitView {
    List(courseMetadata.lessons, selection: $selection) { lesson in
        NavigationLink(value: lesson) {
            LessonRow(lesson: lesson)
        }
    }
    .navigationTitle("\(courseMetadata.lessons.count) Lessons")
} detail : {
    if let lesson = selection {
        LessonDetail(lesson: lesson)
    }
}
.navigationTitle("Main title")

想请教两个问题：

1. 能否指定NavigationLink将详情视图推入哪个NavigationView的栈中？
2. 有没有简便方法让NavigationSplitView呈现NavigationView的样式？

解决方案 #

1. 指定导航栈层级 #

在visionOS中，无法直接指定NavigationLink推入哪个NavigationView栈——因为NavigationView是基于NavigationStack的封装，嵌套NavigationView会导致导航层级混乱，这也是左侧菜单丢失的核心原因。

正确做法是避免嵌套NavigationView，改用单一层级的NavigationStack结合侧边栏布局，或者直接基于NavigationSplitView调整样式，而非强行嵌套导航视图。

2. 让NavigationSplitView模拟NavigationView样式 #

通过以下调整，可以让NavigationSplitView还原NavigationView的经典系统样式：

恢复列表分隔线与Chevron图标

给List设置.listStyle(.insetGrouped)（或.grouped），可还原经典列表的分隔线、行尾Chevron样式：

List(courseMetadata.lessons, selection: $selection) { lesson in
    // ...
}
.listStyle(.insetGrouped)

还原容器背景

通过背景修饰符匹配NavigationView的分组背景：

List(...) {
    // ...
}
.scrollContentBackground(.visible)
.background(Color(.systemGroupedBackground))

调整NavigationLink显示Chevron

改用带闭包的NavigationLink写法，结合列表样式会自动显示Chevron，同时保持侧边栏可见：

NavigationLink {
    LessonDetail(lesson: lesson)
} label: {
    LessonRow(lesson: lesson)
}

最终优化代码示例 #

NavigationSplitView {
    List(courseMetadata.lessons, selection: $selection) { lesson in
        NavigationLink {
            LessonDetail(lesson: lesson)
        } label: {
            LessonRow(lesson: lesson)
        }
    }
    .listStyle(.insetGrouped)
    .scrollContentBackground(.visible)
    .background(Color(.systemGroupedBackground))
    .navigationTitle("\(courseMetadata.lessons.count) Lessons")
} detail : {
    if let lesson = selection {
        LessonDetail(lesson: lesson)
    } else {
        Text("Select a lesson")
            .navigationTitle("Main title")
    }
}
.navigationTitle("Main title")

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