SwiftUI的导航界面的嵌套问题

多彩电脑2026-06-15 8:16

在SwiftUI中，有一种控件叫做NavigationView。这种控件是一个容器，里面通常包含多个NavigationLink，用于点击后切换到下一个界面。

这样的切换，根据代码书写方式不同，有可能是整个页面切换，也可能是页面的一部分切换。

先给出代码和效果。

代码包括三个文件：

主程序

swift 复制代码

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

ContentView（首页）

swift 复制代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView(content: {
            NavigationLink(destination: NavigateView1()) 
            { Text("Navigate 1") }
        })
    }
}

#Preview {
    ContentView()
}

swift 复制代码

import SwiftUI

struct NavigateView1: View {
    var body: some View {
        NavigationView(content: {
            NavigationLink(destination: Text("Destination")) { Text("Navigate nested") }
        })
        NavigationLink(destination: Text("Destination")){
            Text("Navigate not nested")
        }
    }
}

#Preview {
    NavigateView1()
}

效果：

第一张图，点击了Navigate nested，然后最顶上的左箭头仍然保留，下方的Navigate not nested仍然保留。中间那个Navigate nested占用的一大片区域跳转到了新的Destination页面，上方有另一个箭头。从最右的图中可以看出，这个Destination界面有两个左箭头，也就是说它把两层目录嵌套在了同一张屏幕上。

第二种图，点击了Navigate not nested，整个屏幕都切换到了Destination页面。

之所以有这样的区别，原因在于第三块Swift代码，即NavigateView1的代码。

Navigation1里有两个NavigationLink，其中第一个是嵌在NavigationView里的，另一个是独立的。前面说到NavigationView是一个容器，所以当它里面的NavigationLink被点击时，只有容器里的内容才切换至新页面，容器外不影响。但不在NavigationView容器里的NavigationLink被点击时，整个页面都切换。