第1章：SwiftUI 与开发环境简介1.1 什么是 SwiftUI？官方定义根据 Apple 官方文档，Swift

距离上一次学习SwiftUI已经过去几年的时间了，好多知识点都些忘记了，最近刚好有有一些时间就好好的在从零回顾一下吧。

1.1 什么是 SwiftUI？

官方定义

根据 Apple 官方文档，SwiftUI 是一个现代的声明式 UI 框架，它允许开发者使用 Swift 语言创建跨 Apple 平台的用户界面。

SwiftUI 的核心优势

声明式语法：描述界面“是什么”而不是“怎么做”
跨平台：一次编写，在 iOS、iPadOS、macOS、watchOS 和 tvOS 上运行
实时预览：在 Xcode 中实时查看界面效果
与 Swift 语言深度集成：充分利用 Swift 的类型安全和现代特性
自动适配：自动处理不同尺寸设备的布局

与 UIKit 的对比

特性	SwiftUI	UIKit
编程范式	声明式	命令式
代码风格	简洁、直观	冗长、命令式
布局系统	自动布局，基于栈	Auto Layout，需要手动设置约束
状态管理	自动状态同步	手动更新 UI
跨平台	支持所有 Apple 平台	主要针对 iOS/tvOS
开发效率	高	相对较低

1.2 Xcode 开发环境配置

系统要求

macOS：最新版本（推荐 macOS Sonoma 或更高）
Xcode：最新版本（推荐 Xcode 15 或更高）
Swift：Swift 5.7 或更高
iOS：iOS 15.0 或更高（如果需要支持旧版本，最低可到 iOS 13.0）

安装 Xcode

打开 App Store
搜索 “Xcode”
点击 “获取” 进行安装
安装完成后，打开 Xcode 并同意许可协议

安装额外组件

首次打开 Xcode 时，会提示安装额外的组件，包括：

命令行工具
模拟器运行时
其他必要的开发工具

1.3 创建你的第一个 SwiftUI 项目

步骤 1：打开 Xcode

步骤 2：创建新项目

点击 “Create a new Xcode project”
选择 “iOS” 标签页
选择 “App” 模板
点击 “Next”

步骤 3：配置项目信息

Product Name：输入项目名称，例如 “SwiftUIHelloWorld”
Team：选择你的开发团队（如果没有，可以选择 “None”）
Organization Identifier：输入你的组织标识符，例如 “com.yourname”
Interface：选择 “SwiftUI”
Language：选择 “Swift”
Life Cycle：选择 “SwiftUI App”
取消勾选 “Use Core Data”（暂时不需要）
点击 “Next”

步骤 4：选择保存位置

选择一个合适的文件夹保存项目，然后点击 “Create”

步骤 5：项目结构介绍

创建完成后，你会看到以下文件结构：

SwiftUIHelloWorldApp.swift：应用程序入口
ContentView.swift：主视图
Assets.xcassets：资源文件
Info.plist：应用配置

1.4 认识 Xcode 预览功能

预览面板

Xcode 右侧的预览面板是 SwiftUI 最强大的特性之一，它允许你实时查看界面效果。

使用预览

打开 ContentView.swift 文件
确保右侧的预览面板可见（如果不可见，点击 Xcode 顶部的 “Editor” → “Canvas”）
你会看到 ContentView 的实时预览
修改代码，预览会自动更新

预览配置

你可以在预览代码中添加多个预览，例如：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDisplayName("默认预览")
            
            ContentView()
                .previewDisplayName("暗黑模式")
                .preferredColorScheme(.dark)
            
            ContentView()
                .previewDisplayName("iPhone 15 Pro")
                .previewDevice(PreviewDevice(rawValue: "iPhone 15 Pro"))
        }
    }
}

预览快捷键

Option + Command + P：刷新预览
Command + K：清除构建

1.5 SwiftUI 项目结构解析

应用程序入口

SwiftUIHelloWorldApp.swift 是应用的入口点，它定义了应用的结构：

import SwiftUI

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

主视图

ContentView.swift 是应用的主视图：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

关键概念解析

@main：标记应用程序的入口点
App 协议：定义应用的结构
Scene：表示应用的一个场景
WindowGroup：创建应用的窗口
View 协议：所有 SwiftUI 视图必须遵循的协议
body：计算属性，返回视图的内容
#Preview：Xcode 15+ 的新语法，用于创建预览

资源管理

Assets.xcassets：管理应用的图片、颜色等资源
Info.plist：应用的配置信息，如应用名称、版本号等

实战：创建一个简单的欢迎页面

需求分析

创建一个包含以下元素的欢迎页面：

应用图标
应用名称
欢迎标语
开始按钮

代码实现

import SwiftUI

struct WelcomeView: View {
    // 状态变量，用于控制是否显示欢迎页面
    @State private var isWelcomeShown = true
    
    var body: some View {
        if isWelcomeShown {
            VStack(spacing: 20) {
                // 应用图标
                Image(systemName: "star.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 100, height: 100)
                    .foregroundStyle(.yellow)
                
                // 应用名称
                Text("欢迎使用 SwiftUI")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                
                // 欢迎标语
                Text("一个现代、简洁的 UI 框架")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                
                // 开始按钮
                Button("开始探索") {
                    // 点击按钮后隐藏欢迎页面
                    isWelcomeShown = false
                }
                .buttonStyle(.borderedProminent)
                .tint(.blue)
            }
            .padding()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(
                LinearGradient(
                    colors: [.blue.opacity(0.1), .purple.opacity(0.1)],
                    startPoint: .top,
                    endPoint: .bottom
                )
            )
        } else {
            // 主内容页面
            VStack {
                Text("探索 SwiftUI 的世界！")
                    .font(.title)
                Text("这里是你的应用主界面")
                    .foregroundStyle(.secondary)
            }
            .padding()
        }
    }
}

#Preview {
    WelcomeView()
}

代码解析

@State：用于创建视图的本地状态
VStack：垂直堆叠视图
Image：显示图片，使用系统图标
Text：显示文本
Button：创建按钮，带有点击动作
LinearGradient：创建线性渐变背景
条件渲染：使用 if-else 控制显示不同的内容

小结

本章介绍了 SwiftUI 的基本概念和开发环境搭建，包括：

SwiftUI 的核心优势和与 UIKit 的对比
Xcode 的安装和配置
创建第一个 SwiftUI 项目的步骤
Xcode 预览功能的使用
SwiftUI 项目的基本结构
一个简单欢迎页面的实现

通过本章的学习，你已经了解了 SwiftUI 的基本概念和开发环境，为后续的学习打下了基础。

第1章：SwiftUI 与开发环境简介