📖 学习内容****
1️⃣ SwiftUI 介绍 & 和 UIKit 的区别****
SwiftUI 是 Apple 在 iOS 13 引入的 UI 框架，采用声明式语法，与 UIKit 的命令式方式不同：
• UIKit：基于 UIView，需要手动管理视图层级。
• SwiftUI：基于 View，代码更简洁，数据驱动 UI 变化
2️⃣ SwiftUI 基础组件
SwiftUI 主要使用结构体 (struct) 作为 View，例如：
struct ContentView: View {
var body: some View {
Text("Hello, SwiftUI!")
}
}
• Text：显示文本，支持 .font(), .bold(), .foregroundColor()
• Image：加载图片，支持 .resizable(), .scaledToFit()
• Button：创建按钮，使用 action 和 label
3️⃣ 布局系统****
SwiftUI 主要使用 HStack, VStack, ZStack 来布局：
VStack {
Text("标题")
Text("副标题")
}
• HStack（水平排列）
• VStack（垂直排列）
• ZStack（层叠布局）
4️⃣ 视图修饰符****
SwiftUI 提供 .padding(), .background(), .cornerRadius(), .shadow() 等修饰符：
Text("Hello")
.padding()
.background(Color.blue)
.cornerRadius(10)
.shadow(radius: 5)
5️⃣ 颜色 & SF Symbols
使用 Color.primary 适配暗黑模式，使用 Image(systemName:) 加载 SF Symbols：
Image(systemName: "star.fill")
.foregroundColor(.yellow)
💻 练习项目****
✅ 计数器 App****
• 使用 @State 存储数值
• Button("+") 和 Button("-") 控制计数
✅ 个人名片 UI****
• VStack 布局 Image + Text
• 添加 .cornerRadius(), .shadow()
• 适配深色模式
✅ 练习 1：计数器 App
import SwiftUI
struct CounterView: View {
@State private var count = 0
var body: some View {
VStack(spacing: 20) {
Text("计数器")
.font(.title)
.bold()
Text("\(count)")
.font(.system(size: 60, weight: .semibold))
.foregroundStyle(.blue)
HStack(spacing: 40) {
Button {
count -= 1
} label: {
Image(systemName: "minus.circle.fill")
.resizable()
.frame(width: 50, height: 50)
.foregroundStyle(.red)
}
Button {
count += 1
} label: {
Image(systemName: "plus.circle.fill")
.resizable()
.frame(width: 50, height: 50)
.foregroundStyle(.green)
}
}
}
}
}
#Preview {
CounterView()
}
✅练习 2：个人名片 UI**
import SwiftUI
struct ProfileCardView: View {
var body: some View {
ZStack {
Color(.systemBackground)
.ignoresSafeArea(edges: .all)
VStack(spacing: 16) {
Image(systemName: "person.crop.circle.fill")
.resizable()
.frame(width: 100, height: 100)
.foregroundStyle(.blue)
.shadow(radius: 5)
Text("张三")
.font(.title)
.bold()
Text("iOS 开发工程师")
.foregroundStyle(.secondary)
Divider()
VStack(spacing: 10) {
HStack{
Image(systemName: "phone.fill")
.foregroundStyle(.green)
Text("123-456-7890")
}
HStack{
Image(systemName: "envelope.fill")
.foregroundStyle(.orange)
Text("zhangsan@example.com")
}
}
.font(.subheadline)
}
.padding()
.background(Color(.systemGray6))
.clipShape(RoundedRectangle(cornerRadius: 20))
.shadow(radius: 10)
}
}
}
#Preview {
ProfileCardView()
.preferredColorScheme(.dark) // 深色模式预览
}
