实战《从0开始使用SwiftUI搭建记账软件》- 2、SwiftUI 知识点详解与使用场景
SwiftUI 入门精讲：搞懂这些基础知识点，开发 App 不再蒙圈！
✅ 1. @State —— 控制「自己页面里的状态」
作用：用于保存当前视图的临时状态，例如开关、输入框内容、当前选择项等。
使用场景：
控制弹窗是否显示
文本输入是否为空
当前选中的 tab、颜色、开关状态等
示例：
@State private var isShowingAddForm = falseButton("添加账单") {isShowingAddForm = true
}
.sheet(isPresented: $isShowingAddForm) {AddTransactionView()
}
✅ 2. @Binding —— 子页面/子控件「修改父页面的数据」
作用：当父视图希望子视图“能改我传给你的变量”，就用 @Binding。
使用场景：
子页面修改父页面的选项
自定义控件回传数据
示例：
父视图传递：
@State private var selectedCategory: Category = .foodCategorySelectorView(selected: $selectedCategory)
子视图使用：
struct CategorySelectorView: View {@Binding var selected: Categoryvar body: some View {Picker("类别", selection: $selected) {Text("食物").tag(Category.food)Text("交通").tag(Category.transport)}}
}
✅ 3. @ObservedObject —— 管理「外部对象数据状态」
作用：绑定一个外部数据模型（通常是 ViewModel），当里面的 @Published 值变化时，视图自动刷新。
使用场景：
ViewModel 中存放账单数组、总支出等
管理业务逻辑和状态
示例：
class TransactionViewModel: ObservableObject {@Published var transactions: [Transaction] = []
}
视图中使用：
@ObservedObject var viewModel = TransactionViewModel()List(viewModel.transactions) { item inText(item.title)
}
✅ 4. @EnvironmentObject —— 全局共享数据
作用：用于在多个页面间共享同一个对象（如用户信息、主题配置、购物车等），不需要一层层传值。
使用场景：
用户登录信息
应用主题配置
全局账单数据模型
设置方式：
在入口处 .environmentObject() 注入：
@main
struct BookkeepingApp: App {@StateObject var viewModel = TransactionViewModel()var body: some Scene {WindowGroup {ContentView().environmentObject(viewModel)}}
}
在视图中使用：
@EnvironmentObject var viewModel: TransactionViewModel
✅ 5. ZStack —— 「叠放」视图，用于层叠布局
作用：将多个视图按顺序叠加在一起，适合做背景 + 前景 + 浮动按钮等场景。
使用场景：
顶部背景色 + 文字
弹窗、浮层、按钮叠加
示例：
ZStack {Color.whiteVStack {Text("账单列表")}VStack {Spacer()Button("添加账单") { ... }}
}
✅ 6. VStack —— 「竖直堆叠」视图
作用：将子视图垂直排列，默认居中。
使用场景：
表单输入项
标题 + 内容 + 按钮
示例：
VStack(alignment: .leading, spacing: 10) {Text("总支出").font(.headline)Text("￥520.00").font(.title)
}
✅ 7. HStack —— 「水平排列」视图
作用：将多个视图水平排列。
使用场景：
标题 + 图标
分类 + 金额 + 日期
自定义按钮组
示例：
HStack {Image(systemName: "cart.fill")Text("购物")Spacer()Text("￥80.00")
}
✅ 8. SwiftUI 常用基础控件
| 控件 | 用途 | 示例 |
|---|---|---|
Text | 显示文本内容 | Text("总支出") |
Image | 显示图片或系统图标 | Image(systemName: "house") |
Button | 按钮操作 | Button("保存") { ... } |
TextField | 输入框 | TextField("输入金额", text: $amount) |
DatePicker | 日期选择器 | DatePicker("日期", selection: $date) |
Toggle | 开关 | Toggle("是否重复", isOn: $repeat) |
Picker | 选择器 | Picker("分类", selection: $type) {...} |
List | 可滚动列表 | List { ForEach(...) { ... } } |
Spacer | 自动拉伸空隙 | HStack { Text("A") Spacer() Text("B") } |
🎯 小结
如果你刚开始接触 SwiftUI，重点掌握这些就能做出一个完整的 App！它不像 UIKit 那样需要各种代理、回调，只要理解“数据驱动视图”的概念，你写的数据变化，UI就会自动变。