ViewBuilder基本功能介绍

在 SwiftUI 中，@ViewBuilder 是一个属性包装器（Property Wrapper） ，用于声明一个可以组合多个子视图的闭包 ，并自动将它们转换为一个符合 View 协议的视图层次结构。它是 SwiftUI 布局系统的核心机制之一，使得我们可以轻松地在 HStack、VStack、Group 等容器中嵌入多个视图。

---

1. @ViewBuilder 的作用

• 允许闭包返回多个视图 （而不需要显式包装成 Group 或 TupleView）。
• 自动处理条件逻辑 （如 if-else、switch），动态构建视图。
• 是 SwiftUI 中许多容器（如 VStack、HStack）的默认闭包构建方式。

---

2. 基本语法

（1）在自定义视图中使用 @ViewBuilder

如果你想让自己的 View 支持类似 VStack 的多子视图语法，可以用 @ViewBuilder 标记属性或初始化方法：

struct MyContainerView<Content: View>: View {
    let content: Content

    // 使用 @ViewBuilder 让闭包支持多视图
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        VStack {
            content
        }
    }
}

// 使用方式：
MyContainerView {
    Text("Hello")
    Text("World")
}

（2）SwiftUI 内置的 @ViewBuilder

SwiftUI 的许多容器（如 VStack、HStack、Group）的闭包默认就是 @ViewBuilder：

VStack { // 这个闭包是 @ViewBuilder
    Text("A")
    Text("B")
}

---

3. @ViewBuilder 的核心特性

（1）支持多个子视图

普通 Swift 闭包只能返回一个值，但 @ViewBuilder 闭包可以返回多个视图：

// ✅ 合法：返回多个视图
var body: some View {
    VStack {
        Text("A")
        Text("B")
    }
}

// ❌ 非法：普通闭包不能这样写
let views = {
    Text("A")
    Text("B") // Error: Closure containing multiple statements
}

（2）支持条件逻辑

@ViewBuilder 可以处理 if、if let、switch 等条件语句，动态决定显示哪些视图：

@ViewBuilder
func conditionalView(show: Bool) -> some View {
    if show {
        Text("Visible")
    } else {
        Image(systemName: "eye.slash")
    }
}

（3）支持有限的控制流

@ViewBuilder 支持：

• if / else if / else
• switch（但 case 必须返回 View）
• ForEach

但不支持：

• 普通的 for 循环
• guard 语句
• 任意复杂的逻辑（需要用 Group 或函数拆分）

---

4. 实际应用示例

示例 1：自定义卡片容器

struct CardView<Content: View>: View {
    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        VStack {
            content
        }
        .padding()
        .background(Color.white)
        .cornerRadius(10)
        .shadow(radius: 5)
    }
}

// 使用：
CardView {
    Text("Title")
    Divider()
    Text("Content")
}

示例 2：动态构建视图

@ViewBuilder
func badgeView(count: Int) -> some View {
    if count > 0 {
        Text("\(count)")
            .padding(5)
            .background(Color.red)
            .clipShape(Circle())
    }
}

---

5. 注意事项

1. 返回值必须符合 View 协议
   @ViewBuilder 闭包的所有分支必须返回 View 类型（不能返回 nil 或其他类型）。

2. 复杂逻辑需拆分

   如果逻辑过于复杂，建议拆分成多个 @ViewBuilder 函数或使用 Group。

3. 性能优化
   @ViewBuilder 会在每次 body 计算时重新构建视图，避免在闭包内执行耗时操作。

---

6. 总结

特性	说明
多视图支持	闭包内可以直接写多个视图（无需 Group）
条件逻辑	支持 if、switch 动态显示视图
自定义容器	让自定义 View 支持类似 VStack 的语法
限制	不支持 for 循环、guard 等复杂逻辑

核心用途 ：

✅ 构建可复用的自定义容器

✅ 动态生成视图内容

✅ 简化 SwiftUI 布局代码

掌握 @ViewBuilder 可以让你更灵活地设计 SwiftUI 组件！ 🚀