Cheatsheets

Appearance

SwiftUI Cheatsheet ​

🧱 基础视图组件 ​

swift
Text("Hello, world!")       // 文本
Image(systemName: "star")   // SF Symbol 图标
Button("点击我") { ... }    // 按钮
TextField("请输入", text: $name) // 文本输入框
SecureField("密码", text: $password) // 密码框

📦 容器视图（布局） ​

swift
VStack { ... }         // 垂直堆叠
HStack { ... }         // 水平堆叠
ZStack { ... }         // 视图重叠叠放
Spacer()               // 空间填充，用来控制布局弹性
Divider()              // 分割线

ScrollView {
    VStack {
        ForEach(0..<10) { i in
            Text("第 \(i) 项")
        }
    }
}

🧠 状态管理 ​

swift
@State private var count = 0        // 本地状态
@Binding var name: String           // 绑定外部状态
@ObservedObject var vm: ViewModel   // 监听可观察对象
@Environment(\.presentationMode) var mode  // 读取环境值（关闭页面）

🖼️ 修饰符（Modifier） ​

swift
Text("标题")
    .font(.title)               // 字体大小
    .foregroundColor(.blue)     // 字体颜色
    .padding()                  // 内边距
    .background(Color.yellow)   // 背景色
    .cornerRadius(10)           // 圆角
    .shadow(radius: 5)          // 阴影

🎛 控件（Toggle、Picker、Slider） ​

swift
Toggle("启用", isOn: $isOn)          // 开关
Slider(value: $volume, in: 0...100)  // 滑块
Picker("选项", selection: $selected) {
    Text("A").tag(0)
    Text("B").tag(1)
}

🔁 列表 & 动态数据 ​

swift
List {
    ForEach(items) { item in
        Text(item.title)
    }
    .onDelete(perform: deleteItem)
}

🚪 导航 & 页面跳转 ​

swift
NavigationView {
    NavigationLink("进入详情", destination: DetailView())
}

记得包一层 NavigationView 才能让 NavigationLink 正常使用。

✨ 动画 ​

swift
@State private var scale = 1.0

Image("logo")
    .scaleEffect(scale)
    .onTapGesture {
        withAnimation {
            scale += 0.1
        }
    }

🔄 生命周期钩子 ​

swift
.onAppear {
    // 视图出现时执行
}
.onDisappear {
    // 视图消失时执行
}

🧰 进阶控件（可选） ​

swift
ProgressView("加载中...")          // 进度条
DatePicker("选择日期", selection: $date)  // 日期选择
Form { ... }                     // 表单
Group { ... }                   // 逻辑分组视图

🎨 色彩与样式常量 ​

swift
Color.red / .blue / .green / .gray
.font(.largeTitle)
.fontWeight(.bold)

条件渲染 ​

swift
if isLogin {
    Text("欢迎回来")
} else {
    Button("请登录") { ... }
}