swiftiOS开发入门教程：SwiftUI界面设计+简单APP制作案例

想入门 iOS 开发的新手是不是总在这些地方卡壳？听说 SwiftUI 能快速做界面，可打开代码编辑器却不知道怎么下手，控件拖来拖去还是乱成一团；好不容易搭好界面，按钮点击没反应，输入框打字不显示；想做个简单的 APP，却不知道从哪开始，对着教程里的代码一脸懵。别着急，兔子哥第一次用 SwiftUI 做界面时，Text 组件的字体大小调了半天没效果，后来才发现是属性写反了；做按钮交互时，忘了加 @State 修饰变量，点击半天没反应，折腾半天才找到原因。今天就带零基础的你从 SwiftUI 界面设计学到简单 APP 制作，一步步入门 iOS 开发，新手跟着学，做出能运行的 APP 真没那么难！

一、SwiftUI 界面设计基础：常用组件和布局，搭界面像搭积木

SwiftUI 设计界面就像搭积木，用现成的组件拼一拼就行，新手先掌握这几个常用组件和布局容器，基本界面都能搭出来。

1. 常用组件：5 个 “基础零件”，界面骨架全靠它们
   | 组件名称 | 作用 | 简单用法 | 新手必学属性 |
   |----------|------|----------|--------------|
   | Text | 显示文字 | Text("Hello SwiftUI") | font（字体）、foregroundColor（颜色）、padding（边距） |
   | Button | 交互按钮 | Button("点击我") { print("点到了") } | background（背景色）、foregroundColor（文字色）、cornerRadius（圆角） |
   | TextField | 输入文本 | TextField("请输入内容", text: $inputText) | textFieldStyle（样式）、placeholder（提示文字） |
   | Image | 显示图片 | Image("logo")（logo 是图片名） | resizable（缩放）、frame（大小）、clipShape（形状） |
   | List | 列表展示 | List { Text("第一项") Text("第二项") } | onDelete（滑动删除）、onMove（拖动排序） |

比如想显示一段带样式的文字，这样写：
swift

Text("欢迎学习iOS开发").font(.title)  // 字体大小.foregroundColor(.blue)  // 文字颜色.padding()  // 周围留白.background(Color(.systemGray6))  // 背景色.cornerRadius(8)  // 圆角

运行后会看到一段蓝色文字，带灰色背景和圆角，比默认样式好看多了。

1. 布局容器：让组件 “排整齐” 的 3 个核心工具
   组件默认堆在一起，用布局容器能让界面更整齐，新手必学这三个：

• VStack：垂直排列（从上到下），适合放表单、列表项：

swift

VStack(spacing: 15) {  // 组件间距15Text("个人信息")TextField("姓名", text: $name)TextField("年龄", text: $age)}.padding()  // 整体加边距，不贴屏幕边缘

• HStack：水平排列（从左到右），适合放按钮组、搜索栏：

swift

HStack {TextField("搜索内容", text: $searchText).textFieldStyle(.roundedBorder)Button("搜索") { search() }.foregroundColor(.white).background(Color.blue).cornerRadius(5)}.padding()

• ZStack：叠加排列（一层盖一层），适合放背景图上的文字：

swift

ZStack {Image("bg")  // 背景图.resizable().scaledToFill()Text("背景上的文字").foregroundColor(.white).font(.largeTitle)}

二、简单 APP 制作案例：做个 “待办清单” APP，从界面到交互

光会搭界面不够，做个能添加、删除任务的待办清单 APP，把组件和布局结合起来，新手跟着步骤做，成就感满满。

1. 步骤 1：搭基础界面，放输入框、按钮和列表
   新建项目后，在 ContentView.swift 里写界面结构：

swift

import SwiftUIstruct ContentView: View {// 存输入的新任务@State private var newTodo = ""// 存待办任务列表@State private var todos = [String]()var body: some View {VStack(spacing: 20) {Text("我的待办清单").font(.title).fontWeight(.bold)// 输入框和添加按钮HStack {TextField("输入新任务...", text: $newTodo).textFieldStyle(.roundedBorder)Button("添加") {// 点击事件后面加}.padding().background(Color.blue).foregroundColor(.white).cornerRadius(8)}// 待办列表List {ForEach(todos, id: \.self) { todo inText(todo)}.onDelete(perform: deleteTodo)  // 滑动删除}}.padding()}}

1. 步骤 2：加交互功能，实现添加和删除任务
   给按钮加添加功能，再写删除函数：

swift

// 添加任务private func addTodo() {if !newTodo.isEmpty {  // 输入不为空才添加todos.append(newTodo)  // 加到列表newTodo = ""  // 清空输入框}}// 删除任务private func deleteTodo(at offsets: IndexSet) {todos.remove(atOffsets: offsets)  // 从列表删除}// 给按钮绑定添加事件Button("添加") {addTodo()  // 调用添加函数}

1. 步骤 3：美化界面，调整样式和间距

• 给列表加边框：List { ... }.listStyle(.insetGrouped)
• 给按钮加禁用状态：输入为空时按钮变灰不可点

swift

Button("添加") {addTodo()}.disabled(newTodo.isEmpty)  // 输入为空时禁用

运行后，在输入框输 “学习 Swift”，点添加按钮，任务会出现在列表里；左滑任务项，点删除按钮能删掉任务，一个简单的待办清单 APP 就做好了！

三、避坑指南：新手做界面和 APP 最容易踩的 5 个坑

1. 坑 1：界面布局乱成一团，组件挤在一起
   原因：没加间距和约束，VStack/HStack 默认间距小。
   解决：给布局容器加spacing参数（比如VStack(spacing: 20)），整体加padding()，超出屏幕就套ScrollView让内容可滚动。
   
2. 坑 2：按钮点击没反应，输入框打字不显示
   按钮没反应：检查action闭包是否写对，确保Button("文字") { 代码 }的大括号没漏；输入框不显示：text参数必须用@State修饰的变量，比如TextField("提示", text: $inputText)，漏了$或@State就没反应。
   
3. 坑 3：图片不显示，报错 “Could not find image”
   图片没正确添加到项目！把图片拖到 Xcode 的 “Assets.xcassets” 里，确保文件名和代码里的一致（区分大小写），比如图片名是 “bg”，代码里就写Image("bg")。
   
4. 坑 4：列表滑动删除没效果，左滑不出现删除按钮
   List 的删除功能需要用ForEach包裹，并且加onDelete，正确写法：
   

swift

List {ForEach(todos, id: \.self) { todo in  // 必须用ForEachText(todo)}.onDelete(perform: deleteTodo)  // 绑定删除方法}

1. 坑 5：变量修改后界面不更新，数据没变化
   SwiftUI 中，普通变量修改后不会触发界面更新，需要用@State修饰变量，比如@State private var count = 0，这样修改count后界面才会实时更新。

网友 “iOS 新手小 A” 分享：“之前做按钮交互总没反应，后来发现是没加 @State 修饰变量，加上后点击立马有效果，这个细节新手一定要注意！”

四、自问自答：iOS 开发入门常问的 3 个问题

1. “SwiftUI 和 UIKit 哪个更适合新手？”
   肯定是 SwiftUI！SwiftUI 用代码直接描述界面，语法简单，不用拖控件、连线，新手容易上手；UIKit 是传统框架，需要学很多代理方法，适合有基础后再学。苹果现在主推 SwiftUI，新手直接学它准没错。
   
2. “没有 Mac 电脑能学 iOS 开发吗？”
   很难！iOS 开发必须用 Xcode，而 Xcode 只能装在 Mac 上。如果暂时没有 Mac，可以先在网上看教程学理论，了解 Swift 和 SwiftUI 的基本概念，有条件后再实操，毕竟编程还是要动手写代码才能学会。
   
3. “做好的 APP 能装到自己的 iPhone 上吗？”
   可以！但需要苹果开发者账号（免费的个人账号也行），在 Xcode 里登录账号，连接 iPhone，在 “Signing & Capabilities” 里配置证书，就能把 APP 装到自己的手机上测试，不用上架 App Store 也能体验。
   

结尾心得

SwiftUI 开发的乐趣在于 “所见即所得”，搭界面就像拼积木，简单又直观。兔子哥的经验是，新手别一开始就追求复杂功能，先把 Text、Button 这些基础组件练熟，用 VStack、HStack 排好布局，再慢慢加交互。遇到布局乱、组件没反应这些问题别慌，对照避坑指南一条条试，解决多了就有 “手感” 了。做 APP 时从简单的待办清单、计算器开始，看到自己的 APP 能运行、有交互，那种成就感会让你越学越有动力。坚持下去，你会发现 iOS 开发入门真的不难，你也能做出自己的第一个 APP！

标签： .foregroundColor foregroundColor