1. 创建视图（Views）
Text
Text 用于显示文本，可以自定义字体、颜色等样式。
Text("Hello, SwiftUI!")
.font(.title)
.foregroundColor(.blue)
.padding()
Image
Image 用于显示图片，可以是系统图标或者自定义图片。
Image(systemName: "star.fill")
.imageScale(.large)
.foregroundColor(.yellow)
Image("myImage") // 本地图片
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
Button 用于创建按钮，支持自定义样式和点击事件。
Button(action: {
print("Button tapped")
}) {
Text("Tap me")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}
TextField
TextField 用于获取用户输入。
@State private var username = ""
TextField("Enter username", text: $username)
.padding()
.background(Color.gray.opacity(0.1), in: RoundedRectangle(cornerRadius: 10))
Toggle
Toggle 用于创建开关按钮，通常用于布尔值的选择。
@State private var isOn = false
Toggle("Enable feature", isOn: $isOn)
.padding()
Slider
Slider 用于创建滑动条，可以绑定一个数值。
@State private var value = 0.5
Slider(value: $value, in: 0...1)
.padding()
DatePicker
DatePicker 用于选择日期和时间。
@State private var selectedDate = Date()
DatePicker("Select Date", selection: $selectedDate, displayedComponents: .date)
.padding()
2. 布局容器（Containers）
VStack
VStack 用于垂直堆叠子视图。
VStack {
Text("Hello")
Text("World")
}
HStack
HStack 用于水平排列子视图。
HStack {
Text("Left")
Spacer()
Text("Right")
}
ZStack
ZStack 用于将视图堆叠在一起，通常用于层叠效果。
ZStack {
Color.blue
Text("On top of blue background")
.foregroundColor(.white)
}
Grid (LazyVGrid 和 LazyHGrid)
用于创建网格布局，支持动态的布局。
let columns = [GridItem(.flexible()), GridItem(.flexible())]
LazyVGrid(columns: columns) {
ForEach(0..<10) { item in
Text("Item (item)")
.padding()
.background(Color.green)
}
}
List
List 用于显示可滚动的列表，通常与数据源结合使用。
List(messages, id: .self) { message in
Text(message)
}
ScrollView
ScrollView 用于创建滚动视图。
ScrollView {
VStack {
ForEach(0..<50) { item in
Text("Item (item)")
.padding()
}
}
}
3. 布局控制（Modifiers）
Padding
padding 用于为视图添加内边距。
Text("Hello, SwiftUI!")
.padding()
Background
background 用于设置视图的背景。
Text("Hello, World!")
.padding()
.background(Color.blue)
ForegroundColor
foregroundColor 用于设置文本或图形的前景色。
Text("Hello, SwiftUI!")
.foregroundColor(.blue)
CornerRadius
cornerRadius 用于设置视图的圆角。
Text("Rounded Button")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
Frame
frame 用于设置视图的大小。
Text("Fixed Size")
.frame(width: 200, height: 50)
.background(Color.green)
Shadow
shadow 用于为视图添加阴影效果。
Text("Shadowed Text")
.padding()
.background(Color.yellow)
.shadow(radius: 5)
Opacity
opacity 用于调整视图的透明度。
Text("Faded Text")
.opacity(0.5)
4. 导航与路由
NavigationView 和 NavigationLink
NavigationView 是一个容器，用于导航和显示新的视图。
NavigationView {
List(messages, id: .self) { message in
NavigationLink(destination: Text(message)) {
Text(message)
}
}
.navigationBarTitle("Messages")
}
5. 状态管理（State Management）
@State
@State 用于在视图内部管理状态。
@State private var isOn = false
Toggle("Enable feature", isOn: $isOn)
@Binding
@Binding 用于在父子视图之间传递数据。
struct ParentView: View {
@State private var isOn = false
var body: some View {
ChildView(isOn: $isOn)
}
}
struct ChildView: View {
@Binding var isOn: Bool
var body: some View {
Toggle("Enable feature", isOn: $isOn)
}
}
@ObservedObject 和 @StateObject
@ObservedObject 用于观察一个 ObservableObject，@StateObject 用于在视图中创建和管理一个对象。
class UserData: ObservableObject {
@Published var name = "John"
}
struct ContentView: View {
@StateObject var userData = UserData()
var body: some View {
Text(userData.name)
}
}
6. 手势识别
TapGesture
用于检测点击手势。
Text("Tap me")
.onTapGesture {
print("Text tapped!")
}
DragGesture
用于检测拖动手势。
Text("Drag me")
.gesture(DragGesture()
.onChanged { value in
print("Dragging at (value.location)")
})
7. 动画（Animations）
withAnimation
withAnimation 用于包裹视图的变化，使其具有动画效果。
@State private var isVisible = true
Button("Toggle Visibility") {
withAnimation {
isVisible.toggle()
}
}
if isVisible {
Text("Hello, SwiftUI!")
.transition(.slide)
}
动画修饰符
animation 用于给视图添加动画效果。
@State private var scale: CGFloat = 1.0
Text("Animated Text")
.scaleEffect(scale)
.onTapGesture {
withAnimation {
scale = (scale == 1.0) ? 2.0 : 1.0
}
}
