导航与生命周期

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 消失") }
    }
}