导航与生命周期

SwiftUI 用 NavigationStack、TabView、Sheet 组织多屏应用；视图生命周期通过 onAppear、task 等修饰符响应。对照 /roadmaps/swift-ui「导航」节点。

学习目标

• 使用 NavigationStack 实现 push 导航与 deep link
• 用 TabView 构建底部标签栏
• 掌握 Sheet、FullScreenCover 模态呈现
• 理解视图生命周期钩子

核心概念

NavigationStack 与路由

struct Track: Identifiable, Hashable {
    let id: Int
    var title: String
    var lessonCount: Int
}

struct TrackListView: View {
    let tracks = [
        Track(id: 1, title: "SwiftUI 入门", lessonCount: 12),
        Track(id: 2, title: "React 对照", lessonCount: 10),
    ]

    var body: some View {
        NavigationStack {
            List(tracks) { track in
                NavigationLink(value: track) {
                    VStack(alignment: .leading) {
                        Text(track.title).font(.headline)
                        Text("\(track.lessonCount) 课时")
                            .font(.caption)
                            .foregroundStyle(.secondary)
                    }
                }
            }
            .navigationTitle("Tracks")
            .navigationDestination(for: Track.self) { track in
                TrackDetailView(track: track)
            }
        }
    }
}

struct TrackDetailView: View {
    let track: Track

    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text(track.title).font(.largeTitle)
            Text("共 \(track.lessonCount) 课时")
            Spacer()
        }
        .padding()
        .navigationTitle("详情")
        .navigationBarTitleDisplayMode(.inline)
    }
}

iOS 16+ 用 NavigationStack + navigationDestination(for:) 类型安全路由，替代旧版 NavigationView。

TabView 与生命周期

struct MainTabView: View {
    @State private var selectedTab = 0
    @State private var showSettings = false

    var body: some View {
        TabView(selection: $selectedTab) {
            TrackListView()
                .tabItem { Label("学习", systemImage: "book") }
                .tag(0)

            Text("进度页")
                .tabItem { Label("进度", systemImage: "chart.bar") }
                .tag(1)
        }
        .sheet(isPresented: $showSettings) {
            SettingsView()
        }
        .onAppear { print("TabView 出现") }
        .onDisappear { print("TabView 消失") }
    }
}

修饰符	触发时机
onAppear	视图进入屏幕
onDisappear	视图离开屏幕
.task	出现即启动 async，消失自动取消
.task(id:)	依赖变化时重新执行

.task { await load() } 优于 onAppear + Task：视图销毁时自动取消 Task。

与 React/SwiftUI 对照

SwiftUI	React Router	说明
NavigationStack	<BrowserRouter> + routes	栈式导航
NavigationLink(value:)	<Link to>	声明式跳转
navigationDestination	<Route path>	目标页映射
TabView	底部 Tab 布局	多模块切换
.sheet(isPresented:)	Modal / Dialog	模态弹层
onAppear	useEffect(() => {}, [])	挂载
.task	useEffect + cleanup	可取消异步

React Router 的 URL 驱动路由；SwiftUI 以值类型（Hashable）驱动栈，也可用 NavigationPath 恢复状态。

练习

• 实现 Track 列表 → 详情 push 导航
• 添加 TabView：学习 / 进度 / 设置 三个 Tab
• 用 .sheet 从设置 Tab 弹出编辑页
• 在详情页用 .task 加载数据，离开页面验证 Task 取消

小结

NavigationStack 管栈、TabView 管模块、生命周期用 onAppear/task。 下一课并发与 async/await。见 swift-ui-essentials。