本篇目标

从零创建第一个 SwiftUI 项目，理解 SwiftUI 的基本代码结构，完成界面修改、预览和运行，掌握 App 从创建到运行的完整流程。

一、创建新项目

打开 Xcode
菜单栏 File → New → Project
选择 iOS 标签下的 App
点击 Next

填写项目信息：

字段	说明	示例
Product Name	项目名称，英文，无空格	HelloWorld
Team	开发者账号，个人可选 None	None
Organization Identifier	反向域名，唯一标识	com.example
Interface	界面框架，选择 SwiftUI	SwiftUI
Language	开发语言，选择 Swift	Swift
Storage	数据存储，初学选 None	None
Include Tests	是否包含测试，可选	不勾选

Next选择保存位置
点击 Create

二、项目结构说明

创建完成后，Xcode 自动生成以下文件：

HelloWorld/
├── HelloWorld/
    ├── HelloWorldApp.swift     // 应用入口
    ├── ContentView.swift       // 主界面
    └── Assets.xcassets         // 资源文件
└── HelloWorld.xcodeproj        // Xcode工程文件包

`HelloWorldApp.swift`：

import SwiftUI

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

@main：标记应用入口
App 协议：定义应用生命周期
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()
}

struct ContentView: View：定义一个视图
var body: some View：描述界面内容
VStack：垂直排列子视图
Image：显示系统图标
Text：显示文字
.padding()：添加内边距
#Preview：Xcode 预览代码

三、运行项目

在 Xcode 顶部工具栏选择模拟器（如 iPhone 15）
点击左上角运行按钮（三角形）
首次运行需要编译，等待完成
模拟器自动启动，显示 App 界面
看到地球图标和 “Hello, world!” 即表示运行成功

运行失败排查：

检查模拟器是否已安装
检查 Xcode 版本与 macOS 是否匹配
检查项目配置是否有误
查看底部调试区错误信息

四、修改界面

修改文字：

将 Text("Hello, world!") 改为：

Text("我的第一个 iOS App")

修改图标：

将 Image(systemName: "globe") 改为：

Image(systemName: "iphone")

添加新文字：

VStack {
    Image(systemName: "iphone")
        .imageScale(.large)
        .foregroundStyle(.tint)
    Text("我的第一个 iOS App")
        .font(.title)
        .fontWeight(.bold)
    Text("从零开始学习 iOS 开发")
        .font(.subheadline)
        .foregroundStyle(.secondary)
}
.padding()

修改样式：

修饰符	作用
`.font(.title)`	设置字体大小
`.fontWeight(.bold)`	设置字重
`.foregroundStyle(.secondary)`	设置文字颜色
`.padding()`	添加内边距
`.background(Color.blue)`	设置背景色
`.cornerRadius(10)`	设置圆角

五、使用预览

SwiftUI 支持实时预览，修改代码后界面自动刷新。

打开预览：

打开 ContentView.swift
点击右上角 Adjust Editor Options
选择 Canvas
或使用快捷键 Command + Option + Enter

预览窗口操作：

操作	说明
点击预览中的设备	切换设备
点击 Resume	恢复预览
点击 Live Preview	实时交互
点击 Inspect	查看视图层级

预览不刷新解决：

点击 Resume
清理项目：Command + Shift + K
重启 Xcode
检查代码是否有编译错误

六、添加图片资源

准备图片：

尺寸：建议使用 1x、2x、3x 三套图
格式：PNG 或 JPG
命名：英文小写，无空格

添加步骤：

打开 Assets.xcassets
点击左下角 + 号 → New Image Set
命名图片集，如 logo
拖入对应图片
在代码中使用：

Image("logo")
    .resizable()
    .frame(width: 100, height: 100)

七、修改项目信息

修改显示名称：

点击项目名称
General 标签
修改 Display Name

修改版本号：

Version：对外版本号，如 1.0
Build：内部构建号，如 1

修改 App 图标：

打开 Assets.xcassets
选择 AppIcon
拖入对应尺寸图标
图标需符合 Apple 规范

八、避坑指南

项目名称不要用中文：可能导致编译问题。
Bundle Identifier 要唯一：上架后不可修改。
不要直接改文件夹名：应在 Xcode 中重命名。
预览不刷新先检查错误：编译错误会导致预览失败。
图片命名规范：使用英文小写和连字符。
模拟器方向：默认竖屏，可在项目设置中调整。

九、检查清单

[ ] 成功创建第一个 SwiftUI 项目
[ ] 理解 App.swift 和 ContentView.swift 的作用
[ ] 能修改文字和图标
[ ] 能使用 SwiftUI 预览
[ ] 能添加图片资源
[ ] 能修改项目显示名称和版本号
[ ] 在模拟器成功运行 App

📦 这篇笔记对应的完整工程在 HelloWorld —— 一个离线笔记 App。刚建完空项目的话，可以对照着看它的目录结构。

1.4 第一个 Hello World 项目

实践项目