第二部分：MVVM 在 SwiftUI 中的实现

第4章：设计 View 层

SwiftUI 的 View 协议与组件

1. View 协议基础

SwiftUI 的核心是 View 协议，它是所有用户界面组件的基石。任何符合 View 协议的类型都必须实现一个计算属性 body，用于描述视图的内容和布局。

protocol View {
    associatedtype Body: View
    var body: Self.Body { get }
}

2. 内置组件分类

SwiftUI 提供了丰富的内置组件，可分为以下几类：

  • 布局组件：VStack、HStack、ZStack、List、Grid
  • 控件组件：Button、TextField、Toggle、Slider
  • 容器组件：NavigationView、TabView、Group
  • 绘图组件：Shape、Path、Canvas

3. 自定义组件开发

通过组合基础组件可以创建可复用的自定义视图：

struct CardView: View {
    let title: String
    var body: some View {
        VStack {
            Text(title)
                .font(.headline)
            Divider()
            // 其他内容...
        }
        .padding()
        .background(Color.gray.opacity(0.1))
    }
}

4. 视图修饰符（Modifiers）

SwiftUI 通过链式调用修饰符来配置视图：

Text("Hello")
    .font(.title)
    .foregroundColor(.blue)
    .padding()

关键修饰符类型：

  • 布局修饰符：padding()、frame()、position()
  • 样式修饰符：font()、foregroundColor()、background()
  • 交互修饰符：onTapGesture()、onLongPressGesture()

5. 视图生命周期

SwiftUI 提供特定修饰符处理视图生命周期事件：

struct ContentView: View {
    var body: some View {
        Text("Hello")
            .onAppear {
                print("视图出现")
            }
            .onDisappear {
                print("视图消失")
            }
    }
}

6. 预览功能

PreviewProvider 协议支持实时预览：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 14")
            .previewDisplayName("iPhone 14")
    }
}

技术要点

  1. some View 的使用简化了返回复杂视图类型的声明
  2. 视图是值类型（Struct），依赖自动生成的 body 计算属性
  3. 所有修改都通过返回新视图实现，而非直接修改属性

最佳实践：保持视图简洁，将复杂逻辑分解为多个子视图，通过组合构建复杂界面。

Last Updated::