Swift 与 SwiftUI 概览

对照 /roadmaps/swift-ui 路线图起点：Swift 是 Apple 的现代语言，SwiftUI 是声明式 UI 框架。本 track 从语言到界面、状态、导航与架构，系统覆盖 swift-ui 路线图节点。若已有 React 经验，SwiftUI 的组件化与状态模型会非常熟悉。

学习目标

• 了解 Swift 与 Objective-C、SwiftUI 与 UIKit 的定位差异
• 安装 Xcode，创建并运行第一个 SwiftUI 项目
• 理解 @main App 入口与 View 协议
• 明确本 track 在 /roadmaps/swift-ui 中的位置

核心概念

SwiftUI vs UIKit

框架	范式	适用
SwiftUI	声明式，描述 UI 状态	新项目、跨 Apple 平台
UIKit	命令式，手动布局与刷新	遗留项目、精细控件定制

SwiftUI 2019 年随 iOS 13 发布；新项目默认选型 SwiftUI，复杂场景可与 UIKit 混编（UIViewRepresentable）。

Xcode 与项目结构

1. Mac App Store 安装 Xcode
2. File → New → Project → iOS → App，Interface 选 SwiftUI
3. ⌘R 在模拟器运行

典型 SwiftUI 项目结构：

MyApp/
├── MyAppApp.swift      // @main 入口
├── ContentView.swift   // 根视图
└── Assets.xcassets     // 资源

第一个 SwiftUI 应用

import SwiftUI

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

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "swift")
                .font(.system(size: 48))
                .foregroundStyle(.orange)
            Text("SwiftUI 开发入门")
                .font(.title2.bold())
            Text("CodeRoadMap Track")
                .foregroundStyle(.secondary)
            Button("开始学习") {
                print("点击开始学习")
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

@main 标记程序入口；App 协议定义 Scene；View 协议用 body 描述界面。#Preview 提供 Xcode Canvas 实时预览。

与 React/SwiftUI 对照

维度	SwiftUI	React
UI 描述	View + body	函数组件 + JSX
入口	@main struct App	createRoot().render()
样式	Modifier 链式调用	className / CSS-in-JS
预览	#Preview / Canvas	Storybook
平台	iOS / macOS / watchOS	Web / React Native
状态更新	@State 触发 Diff	setState / Hook 触发重渲染

React 开发者可将 SwiftUI 视为「原生版 React」：声明 UI、数据驱动视图。深入 Web 对照见 react-essentials。

练习

• 安装 Xcode，确认 swift --version ≥ 5.9
• 创建 SwiftUI 项目，修改首页显示中文标题
• 浏览 /roadmaps/swift-ui，标记「语言基础」节点
• 在 Canvas 中使用 #Preview 预览不同设备尺寸

小结

SwiftUI = Swift 语言 + 声明式 View + Xcode 预览。 下一课基础语法与类型。本 track 见 swift-ui-essentials。