SwiftUI Foreach中如何使用Toggle组件

最近有一个需求，在一个界面中显示一个列表，列表中多个cell的右边要显示一个Toggle，也就是UIKit中的UISwitch开关，我们知道Toggle组件需要绑定一个变量的，但是列表数据是从服务器取的，要用多少个Toggle组件不可知，所以如何记住这些Toggle的值呢？

如果用一个变量绑定所有的Toggle，那么这些Toggle就是同开同关了，显然不行。下面来看一下具体实现。

Foreach组件

Foreach组件是SwiftUI中的一个非常强大的组件。它可以用来遍历一个集合，并为集合中的每个元素创建一个视图。以下是一个使用Foreach组件的示例：

struct ContentView: View {
    let books = ["Book1", "Book2", "Book3"]
    var body: some View {
        ForEach(books, id: \.self) { book in
            Text(boks)
        }
    }
}

在上面的示例中，我们创建了一个名为books的字符串数组，并使用Foreach组件遍历了该数组。我们还指定了id参数，用于确定集合中每个元素的唯一性。

Toggle组件

Toggle组件是SwiftUI中的另一个非常有用的组件。它可以用来创建一个开关，使用户可以切换某个设置的状态。以下是一个使用Toggle组件的示例：

struct ContentView: View {
    @State var isOn = false
    var body: some View {
        Toggle("Toggle", isOn: $isOn)
    }
}

在上面的示例中，我们创建了一个名为isOn的布尔值状态，并使用Toggle组件来创建了一个开关。我们还使用了$符号来绑定Toggle组件的值到我们的状态变量上。

在Foreach中使用Toggle组件

现在我们已经了解了如何在SwiftUI中使用Foreach和Toggle组件，让我们来看看如何将它们结合起来。以下是一个在Foreach中使用Toggle组件的示例：

struct ContentView: View {
    @State var books = [
        BookModel(name: "Book1", isSelected: false),
        BookModel(name: "Book2", isSelected: false),
        BookModel(name: "Book3", isSelected: false)
    ]

    var body: some View {
        VStack {
            ForEach(0..<books.count) { index in
                Toggle(isOn: $books[index].isSelected) {
                    Text(books[index].name)
                }
            }
        }
    }
}

struct BookModel: Identifiable {
    let id = UUID()
    let name: String
    var isSelected: Bool
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

在上面的示例中，我们创建了一个名为books的BookModel数组，并在Foreach中遍历它。我们还为每个Toggle组件提供了一个状态变量，以便用户可以更改每个book的isSelected状态。

注意，这里在遍历的时候我们使用的索引遍历，而非直接遍历books，如果直接遍历boos，那么在闭包里面获取到的book，我们无法直接将book的isSelected绑定到Toggle上，系统会报错的。因此我们通过`$books[index].isSelected`进行绑定。

结论

在SwiftUI中，我们可以使用Foreach和Toggle组件来创建动态的UI界面。在本文中，我们介绍了如何在Foreach中使用Toggle组件，并为每个book提供了一个状态变量。

希望这篇文章能够帮助你更好地理解SwiftUI中的Foreach和Toggle组件。