logo
SwiftUI 入门

SwiftUI 用户界面

常用控件

文本和标签

// 基本文本
Text("Hello, World!")
.font(.title)
.bold()
// 标签
Label("用户名", systemImage: "person.circle")
// 可编辑文本
TextEditor(text: $notes)
.frame(height: 100)

按钮和控制器

// 基本按钮
Button("点击我") {
print("按钮被点击")
}
// 自定义按钮
Button(action: handleTap) {
HStack {
Image(systemName: "star.fill")
Text("收藏")
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
// 开关
Toggle("通知", isOn: $isNotificationEnabled)
// 滑块
Slider(value: $volume, in: 0...100)
// 步进器
Stepper("数量: \(quantity)",
value: $quantity,
in: 1...10)

列表和滚动视图

基本列表

List {
Text("第一项")
Text("第二项")
Text("第三项")
}
// 动态列表
List(items, id: \.id) { item in
Text(item.title)
}
// 分组列表
List {
Section(header: Text("收藏")) {
ForEach(favoriteItems) { item in
ItemRow(item: item)
}
}
Section(header: Text("推荐")) {
ForEach(recommendedItems) { item in
ItemRow(item: item)
}
}
}

滚动视图

ScrollView {
VStack(spacing: 20) {
ForEach(0..<50) { i in
Text("项目 \(i)")
}
}
}
// 水平滚动
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
ForEach(images, id: \.self) { image in
Image(image)
.resizable()
.frame(width: 200, height: 200)
}
}
}

导航系统

导航视图

NavigationView {
List(items) { item in
NavigationLink(destination: DetailView(item: item)) {
Text(item.title)
}
}
.navigationTitle("我的列表")
.navigationBarItems(
trailing: Button(action: addItem) {
Image(systemName: "plus")
}
)
}

标签视图

TabView {
HomeView()
.tabItem {
Label("首页", systemImage: "house")
}
ProfileView()
.tabItem {
Label("我的", systemImage: "person")
}
}

手势识别

基本手势

// 点击手势
Text("点击我")
.onTapGesture {
print("被点击了")
}
// 长按手势
Image("photo")
.onLongPressGesture(minimumDuration: 1) {
print("长按触发")
}
// 拖拽手势
Circle()
.fill(Color.blue)
.frame(width: 100, height: 100)
.offset(offset)
.gesture(
DragGesture()
.onChanged { value in
offset = value.translation
}
.onEnded { _ in
withAnimation {
offset = .zero
}
}
)

练习

创建一个简单的照片库应用:

struct Photo: Identifiable {
let id = UUID()
let name: String
let image: String
}
struct PhotoGallery: View {
let photos = [
Photo(name: "风景1", image: "landscape1"),
Photo(name: "风景2", image: "landscape2"),
Photo(name: "风景3", image: "landscape3")
]
@State private var selectedPhoto: Photo?
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
], spacing: 10) {
ForEach(photos) { photo in
Image(photo.image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(height: 120)
.clipped()
.cornerRadius(8)
.onTapGesture {
selectedPhoto = photo
}
}
}
.padding()
}
.navigationTitle("照片库")
.sheet(item: $selectedPhoto) { photo in
PhotoDetailView(photo: photo)
}
}
}
}
struct PhotoDetailView: View {
let photo: Photo
@Environment(\.presentationMode) var presentationMode
var body: some View {
VStack {
Image(photo.image)
.resizable()
.aspectRatio(contentMode: .fit)
Text(photo.name)
.font(.title)
Button("关闭") {
presentationMode.wrappedValue.dismiss()
}
.padding()
}
}
}

通过这个练习,你可以学习:

  1. 使用 Grid 布局创建照片网格
  2. 实现照片预览功能
  3. 添加手势交互
  4. 使用模态视图展示详情