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(_:_:)
  控制视图内边距（支持方向选择）。

  swift

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

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

  swift

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

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

  swift

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

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

  swift

  Text("Fixed").fixedSize()
  

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

  swift

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

2. 外观修饰符

颜色与形状

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

  swift

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

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

  swift

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

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

  swift

  Rectangle().cornerRadius(10)
  

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

  swift

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

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

  swift

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

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

  swift

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

3. 交互修饰符

手势与事件

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

  swift

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

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

  swift

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

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

  swift

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

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

  swift

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

4. 状态与数据流

生命周期与数据绑定

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

  swift

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

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

  swift

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

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

  swift

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

5. 导航与弹窗

导航控制

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

  swift

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

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

  swift

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

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

  swift

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

6. 动画与过渡

动画效果

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

  swift

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

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

  swift

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

7. 环境与配置

环境变量

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

  swift

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

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

  swift

  ContentView().environmentObject(UserSettings())
  

8. 列表与表格

列表样式

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

  swift

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

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

  swift

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

9. 调试与预览

开发工具

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

  swift

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

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

  swift

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

10. 平台特定

平台适配

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

  swift

  Color.blue.ignoresSafeArea(.all)
  

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

  swift

  ContentView().statusBarHidden(true)
  

总结

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

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

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