Overview

文档#

SwiftUI | Apple Developer Documentation

SwiftUI 的大分类结构概述#

以下是 SwiftUI 的大分类和对应用途的整体结构表：

接下来，我们将用细分表格列出各分类内的主要细分。

1. 视图 (View)#

2. 布局系统#

3. 数据驱动编程#

4. 数据展示#

5. 导航与容器#

6. 表单与输入控件#

7. 动画与事务#

8. 手势与交互#

9. 绘图与图形#

10. 状态与生命周期管理#

11. SwiftUI 的设计理念总结#

SwiftUI 的体系结构是模块化的，关注点独立，从视图构建到动画和多平台支持，解决了大量传统 UI 开发的繁琐问题。整个结构以“声明式编程”和“响应式绑定”为核心，通过对视图（View）、布局系统、数据驱动编程等功能的划分，使开发者能快速掌握并高效使用。

核心修饰符#

在 SwiftUI 中，以下是按功能分类的 SwiftUI 核心修饰符列表，涵盖布局、样式、交互、动画等关键领域：

1. 布局修饰符#

尺寸与位置#

• .padding(_:_:)
  控制视图内边距（支持方向选择）。

  Text("Hello").padding(10)          // 四周内边距
  Text("Hello").padding(.top, 20)   // 仅顶部内边距

• .offset(_:)
  直接偏移视图的渲染位置（不影响布局计算）。

  Text("Offset").offset(x: 10, y: 20)

• .position(_:)
  在父视图坐标系中绝对定位。

  Text("Center").position(x: 200, y: 100)

• .fixedSize()
  阻止视图被压缩或拉伸，保持理想尺寸。

  Text("Fixed").fixedSize()

• .layoutPriority(_:)
  调整视图在布局冲突中的优先级（默认优先级为 0）。

  Text("High Priority").layoutPriority(1)

2. 外观修饰符#

颜色与形状#

• .foregroundColor(_:)
  设置前景色（文本、图标等）。

  Text("Red Text").foregroundColor(.red)

• .background(_:alignment:)
  添加背景视图（颜色、形状或其他视图）。

  Text("Hello").background(Color.yellow)

• .cornerRadius(_:)
  设置圆角半径（需配合 background 或边框使用）。

  Rectangle().cornerRadius(10)

• .shadow(color:radius:x:y:)
  添加阴影效果。

  Circle().shadow(color: .gray, radius: 5, x: 2, y: 2)

• .overlay(_:alignment:)
  在视图上方叠加内容。

  Circle().overlay(Text("Overlay"), alignment: .center)

• .clipShape(_:)
  将视图裁剪为指定形状。

  Image("cat").clipShape(Circle())

3. 交互修饰符#

手势与事件#

• .onTapGesture(count:perform:)
  点击手势（支持双击）。

  Text("Tap Me").onTapGesture { print("Tapped!") }

• .onLongPressGesture(...)
  长按手势。

  Text("Long Press").onLongPressGesture(minimumDuration: 1) { ... }

• .gesture(_:)
  添加自定义手势（如拖拽、缩放）。

  Image("photo").gesture(DragGesture().onChanged { ... })

• .disabled(_:)
  禁用视图的交互。

  Button("Submit") { ... }.disabled(isLoading)

4. 状态与数据流#

生命周期与数据绑定#

• .onAppear(perform:) / .onDisappear(perform:)
  视图出现/消失时触发操作。

  Text("Hello").onAppear { fetchData() }

• .onChange(of:perform:)
  监听特定值的变化。

  @State var count = 0
  Text("Count: \(count)").onChange(of: count) { print("New value: \($0)") }

• .task(priority:_:)
  异步任务（自动取消于视图消失时）。

  Text("Load Data").task { await loadData() }

5. 导航与弹窗#

导航控制#

• .navigationTitle(_:) / .navigationBarTitleDisplayMode(_:)
  设置导航标题和显示模式。

  NavigationView {
    Text("Home").navigationTitle("Main")
  }

• .sheet(isPresented:onDismiss:content:)
  显示模态视图。

  Button("Show Sheet") { showSheet.toggle() }
    .sheet(isPresented: $showSheet) { SheetView() }

• .alert(isPresented:content:)
  显示警告框。

  Button("Delete") { showAlert.toggle() }
    .alert("Confirm", isPresented: $showAlert) { 
      Button("Delete", role: .destructive) { ... }
    }

6. 动画与过渡#

动画效果#

• .animation(_:value:)
  为特定值的变化添加动画。

  @State var scale = 1.0
  Button("Scale") { scale += 0.5 }
    .scaleEffect(scale)
    .animation(.spring(), value: scale)

• .transition(_:)
  定义视图插入或移除时的过渡效果。

  if showView {
    Text("Hello").transition(.slide)
  }

7. 环境与配置#

环境变量#

• .environment(_:_:)
  设置环境值（如字体、颜色模式）。

  ContentView().environment(\.colorScheme, .dark)

• .environmentObject(_:)
  注入可观察对象。

  ContentView().environmentObject(UserSettings())

8. 列表与表格#

列表样式#

• .listRowInsets(_:)
  调整列表行的内边距。

  List {
    Text("Row 1").listRowInsets(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))
  }

• .listStyle(_:)
  设置列表样式（如分组、侧边栏）。

  List { ... }.listStyle(.sidebar)

9. 调试与预览#

开发工具#

• .border(_:width:)
  快速查看视图的边界。

  Text("Debug").border(Color.red)

• .redacted(reason:)
  显示占位内容（用于预览加载状态）。

  Text("Loading...").redacted(reason: .placeholder)

10. 平台特定#

平台适配#

• .ignoresSafeArea(_:edges:)
  让视图忽略安全区域（全屏显示）。

  Color.blue.ignoresSafeArea(.all)

• .statusBarHidden(_:)
  隐藏状态栏（iOS）。

  ContentView().statusBarHidden(true)

总结#

这些修饰符是 SwiftUI 开发中的核心工具，掌握它们可以高效实现以下功能：

1. 布局控制：frame、padding、offset
2. 样式设计：background、foregroundColor、cornerRadius
3. 交互响应：onTapGesture、gesture
4. 状态管理：onAppear、onChange
5. 动画与过渡：animation、transition

建议结合官方文档和实际项目实践，逐步掌握它们的组合使用技巧！