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 对照

维度