ForEach 循环视图

在 SwiftUI 中，ForEach 是一个强大的结构，用于在视图中动态创建多个相似的子视图。它可以与数组、集合或范围结合使用，支持对数据的迭代显示。以下是关于 ForEach 的详细介绍和使用示例。

1. 基本使用

1.1 使用数组进行 ForEach

ForEach 可以与数组结合使用，以生成列表项或其他视图。

示例：基本的 ForEach

import SwiftUI

struct ForEachExample: View {
    let fruits = ["Apple", "Banana", "Cherry", "Date"]

    var body: some View {
        VStack {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit) // 每个数组元素生成一个 Text 视图
                    .font(.headline)
                    .padding()
            }
        }
        .navigationTitle("Fruits List") // 设置导航栏标题
    }
}

1.2 使用范围进行 ForEach

你可以使用范围生成固定数量的视图。

示例：使用范围生成视图

struct RangeForEachExample: View {
    var body: some View {
        VStack {
            ForEach(0..<5) { index in
                Text("Item \(index)") // 根据范围生成视图
                    .font(.headline)
                    .padding()
            }
        }
        .navigationTitle("Range Items") // 设置导航栏标题
    }
}

2. 使用标识符

2.1 使用自定义对象

当使用自定义对象时，需要确保对象遵循 Identifiable 协议，以便 ForEach 可以唯一标识每个元素。

示例：使用 Identifiable 对象

struct Fruit: Identifiable {
    var id = UUID() // 唯一标识符
    var name: String
}

struct IdentifiableForEachExample: View {
    let fruits = [Fruit(name: "Apple"), Fruit(name: "Banana"), Fruit(name: "Cherry")]

    var body: some View {
        List {
            ForEach(fruits) { fruit in
                Text(fruit.name) // 使用 Identifiable 对象
            }
        }
        .navigationTitle("Identifiable Fruits") // 设置导航栏标题
    }
}

3. 嵌套 ForEach

3.1 嵌套使用 ForEach

你可以在 ForEach 中嵌套另一个 ForEach，用于显示多层级的数据结构。

示例：嵌套 ForEach

struct NestedForEachExample: View {
    let categories = [
        "Fruits": ["Apple", "Banana", "Cherry"],
        "Vegetables": ["Carrot", "Lettuce", "Peas"]
    ]

    var body: some View {
        List {
            ForEach(categories.keys.sorted(), id: \.self) { category in
                Section(header: Text(category)) {
                    ForEach(categories[category]!, id: \.self) { item in
                        Text(item) // 嵌套 ForEach 显示类别项
                    }
                }
            }
        }
        .navigationTitle("Nested ForEach") // 设置导航栏标题
    }
}

4. 动态更新视图

4.1 结合 @State 和 ForEach

ForEach 可以与状态管理结合使用，以动态更新视图。

示例：动态更新的 ForEach

struct DynamicForEachExample: View {
    @State private var fruits = ["Apple", "Banana", "Cherry"]

    var body: some View {
        VStack {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit) // 显示水果
            }
            Button("Add Fruit") {
                fruits.append("New Fruit") // 添加新水果
            }
        }
        .navigationTitle("Dynamic ForEach") // 设置导航栏标题
    }
}

5. 总结

  • 基本用法：ForEach 用于在视图中循环显示多个元素。
  • 标识符：自定义对象应遵循 Identifiable 协议，以便正确识别。
  • 嵌套使用：可以在 ForEach 中嵌套另一个 ForEach，用于多层级数据。
  • 动态更新：结合 @State 实现动态更新的视图。

通过灵活使用 ForEach，可以有效地构建动态、响应式的用户界面，使数据的展示变得简单而直观。

Last Updated::