SwiftUI 循环添加 List

在使用 SwiftUI 构建用户界面时，我们经常需要循环添加多个相似的视图。这种情况下，我们可以使用 List 组件来方便地显示一个可滚动的列表。

创建基本列表

要创建一个简单的列表，我们可以使用 List 组件，并在其中添加一些子视图。例如，我们可以创建一个包含一组文字的列表，代码如下：

struct ContentView: View {
    var body: some View {
        List {
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
    }
}

在上面的代码中，我们创建了一个包含三个文本项的列表。每个文本项都是一个 Text 组件。

循环添加列表项

如果我们有一个数组，想要用其中的元素循环添加列表项，可以使用 ForEach 来遍历数组并生成相应的视图。下面是一个例子：

struct ContentView: View {
    var items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
        }
    }
}

在上面的代码中，我们定义了一个 items 数组，其中包含了三个字符串元素。然后，我们使用 ForEach 遍历 items 数组，并为每个元素生成一个 Text 视图。

需要注意的是，我们在 ForEach 中使用了 id: \.self 来指定数组中的元素是唯一的。这样可以确保列表项在刷新时正确地更新。

添加列表项的交互

在 SwiftUI 中，我们可以方便地为列表项添加交互。我们可以在 Text 组件上添加按钮、手势等。

struct ContentView: View {
    var items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
                    .onTapGesture {
                        print("Tapped \(item)")
                    }
            }
        }
    }
}

在上面的代码中，我们为每个列表项添加了一个 onTapGesture，当用户点击该项时，会打印出相应的文本。

类似地，我们还可以为列表项添加其他手势，例如 swipe、长按等。

列表项的动态添加和删除

有时候，我们需要动态地添加和删除列表项。在 SwiftUI 中，我们可以通过添加或删除数组中的元素来实现这一点。

struct ContentView: View {
    @State var items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
                    .onTapGesture {
                        self.removeItem(item)
                    }
            }
        }
        .navigationBarItems(trailing: Button(action: {
            self.addItem()
        }) {
            Image(systemName: "plus")
        })
    }
    
    func addItem() {
        items.append("New Item")
    }
    
    func removeItem(_ item: String) {
        items.removeAll(where: { $0 == item })
    }
}

在上面的代码中，我们使用 @State 属性包装了 items 数组。这样，在数组发生变化时，视图会自动刷新。

我们为列表项添加了一个 onTapGesture，当用户点击列表项时，会调用 removeItem 方法来删除该项。

另外，我们还在导航栏添加了一个按钮，点击该按钮会调用 addItem 方法来添加一个新的列表项。

总结

通过使用 SwiftUI 中的 List 和 ForEach 组件，我们可以轻松地循环添加列表项，并为其添加交互。我们还可以动态地添加和删除列表项，并通过使用 @State 属性来实现视图的自动刷新。

希望本文对你理解和使用 SwiftUI 中循环添加 List 有所帮助！

sequenceDiagram
    participant User
    participant App

    User->>App: 点击列表项
    App->>App: 调用 onTapGesture 回调
    App->>User: 打印文本

gantt
    dateFormat  YYYY-MM-DD
    title 甘特图示例

    section 任务1
    任务1: 2022-01-01, 3d

    section 任务2